{% extends "_market/_layouts/main" %}

{% set title = 'Training Portal' %}

{% set breadcrumbs = [
    {
        url: url('market/training'),
        label: title
    }
] %}

{% block content %}

    {# Existing account banner #}
    <div class="bg-gradient-to-r from-brand-600 to-brandsecondary-500">
        <div class="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between flex-wrap">
                <div class="flex-1 flex items-center">
                    <span class="flex p-2 rounded-lg bg-brand-800">
                        {# Heroicon name: outline/badge-check #}
                        <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                        </svg>
                    </span>
                    <p class="ml-3 font-medium text-white truncate">
                        <span class="lg:hidden">
                            Already have an account?
                        </span>
                        <span class="hidden lg:inline">
                            Already have a Cheerfully Selling account?
                        </span>
                    </p>
                </div>
                <div class="mt-2 flex-shrink-0 w-full sm:mt-0 sm:w-auto">
                    <a href="https://courses.cheerfullygiven.com/products/cheerfully-selling" target="_blank" class="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-brand-600 bg-white hover:bg-brand-50">
                        Sign in
                        <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
                            <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>

    {# Hero section #}
    <div class="relative mt-6">
        <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
                <div class="absolute inset-0">
                    <img class="h-full w-full object-cover" src="https://cheerfully-given.imgix.net/files/CG-Group.jpg?auto=format%2Ccompress&w=1080&dpr=3&s=97882ceb8c751a89d9a96e3a807cdb59" alt="The seller community standing in front of a wall">
                    <div class="absolute inset-0 bg-gradient-to-r from-brand-800 to-brandsecondary-700" style="mix-blend-mode: multiply;"></div>
                </div>
                <div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
                    <h1 class="text-center text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
                        <span class="block text-white">Make the most of your</span>
                        <span class="block text-brandsecondary-200">Cheerfully Given shop</span>
                    </h1>
                    <p class="mt-6 max-w-lg mx-auto text-center text-xl text-brandsecondary-200 sm:max-w-3xl">
                        Sign up to Cheerfully Selling, our support centre for your Cheerfully Given shop.
                    </p>
                    <div class="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center">
                        <div class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
                            <a href="https://courses.cheerfullygiven.com/store" target="_blank" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-brandsecondary-700 bg-white hover:bg-brandsecondary-50 sm:px-8">
                                Get started
                            </a>
                            <a href="#" target="_blank" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-brandsecondary-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8">
                                Live demo
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Alternating Feature Sections #}
    <div class="relative pt-16 pb-32 overflow-hidden">
        <div aria-hidden="true" class="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-gray-100"></div>
        <div class="relative">
            <div class="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
                <div class="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
                    <div>
                        <div>
                            <span class="h-12 w-12 rounded-md flex items-center justify-center bg-gradient-to-r from-brand-600 to-brandsecondary-600">
                                <!-- Heroicon name: outline/inbox -->
                                <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                                </svg>
                            </span>
                        </div>
                        <div class="mt-6">
                            <h2 class="text-3xl font-extrabold tracking-tight text-gray-900">
                                Stay on top of customer support
                            </h2>
                            <p class="mt-4 text-lg text-gray-500">
                                Semper curabitur ullamcorper posuere nunc sed. Ornare iaculis bibendum malesuada faucibus lacinia porttitor. Pulvinar laoreet sagittis viverra duis. In venenatis sem arcu pretium pharetra at. Lectus viverra dui tellus ornare pharetra.
                            </p>
                            <div class="mt-6">
                                <a href="#" target="_blank" class="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-gradient-to-r from-brand-600 to-brandsecondary-600 hover:from-brand-700 hover:to-brandsecondary-700">
                                    Get started
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="mt-8 border-t border-gray-200 pt-6">
                        <blockquote>
                            <div>
                                <p class="text-base text-gray-500">
                                    &ldquo;Cras velit quis eros eget rhoncus lacus ultrices sed diam. Sit orci risus aenean curabitur donec aliquet. Mi venenatis in euismod ut.&rdquo;
                                </p>
                            </div>
                            <footer class="mt-3">
                                <div class="flex items-center space-x-3">
                                    <div class="flex-shrink-0">
                                        <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" alt="">
                                    </div>
                                    <div class="text-base font-medium text-gray-700">
                                        Marcia Hill, Digital Marketing Manager
                                    </div>
                                </div>
                            </footer>
                        </blockquote>
                    </div>
                </div>
                <div class="mt-12 sm:mt-16 lg:mt-0">
                    <div class="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
                        <img class="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none" src="https://cheerfully-given.imgix.net/files/cheerfully-selling-temp-2.png?auto=format%2Ccompress&w=2560&h=1536&fit=crop&dpr=3&s=b6ee1803ea49cc432dfdb680dace7272" alt="Cheerfully Selling homepage">
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-24">
            <div class="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
                <div class="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
                    <div>
                        <div>
                            <span class="h-12 w-12 rounded-md flex items-center justify-center bg-gradient-to-r from-brand-600 to-brandsecondary-600">
                                <!-- Heroicon name: outline/sparkles -->
                                <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
                                </svg>
                            </span>
                        </div>
                        <div class="mt-6">
                            <h2 class="text-3xl font-extrabold tracking-tight text-gray-900">
                                Better understand your customers
                            </h2>
                            <p class="mt-4 text-lg text-gray-500">
                                Semper curabitur ullamcorper posuere nunc sed. Ornare iaculis bibendum malesuada faucibus lacinia porttitor. Pulvinar laoreet sagittis viverra duis. In venenatis sem arcu pretium pharetra at. Lectus viverra dui tellus ornare pharetra.
                            </p>
                            <div class="mt-6">
                                <a href="#" target="_blank" class="inline-flex px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-gradient-to-r from-brand-600 to-brandsecondary-600 hover:from-brand-700 hover:to-brandsecondary-700">
                                    Get started
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-12 sm:mt-16 lg:mt-0 lg:col-start-1">
                    <div class="pr-4 -ml-48 sm:pr-6 md:-ml-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
                        <img class="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none" src="https://cheerfully-given.imgix.net/files/cheerfully-selling-temp.png?auto=format%2Ccompress&w=2560&h=1536&fit=crop&dpr=3&s=0715817102ae790e798929fc676dbf88" alt="Cheerfully Selling course interface">
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Gradient Feature Section #}
    <div class="bg-gradient-to-r from-brand-800 to-brandsecondary-700">
        <div class="max-w-4xl mx-auto px-4 py-16 sm:px-6 sm:pt-20 sm:pb-24 lg:max-w-7xl lg:pt-24 lg:px-8">
            <h2 class="text-3xl font-extrabold text-white tracking-tight">
                Inbox support built for efficiency
            </h2>
            <p class="mt-4 max-w-3xl text-lg text-brand-200">
                Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis. Blandit aliquam sit nisl euismod mattis in.
            </p>
            <div class="mt-12 grid grid-cols-1 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-4 lg:gap-x-8 lg:gap-y-16">
                <div>
                    <div>
  <span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10">
    <!-- Heroicon name: outline/inbox -->
    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
    </svg>
  </span>
                    </div>
                    <div class="mt-6">
                        <h3 class="text-lg font-medium text-white">Unlimited Inboxes</h3>
                        <p class="mt-2 text-base text-brand-200">
                            Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.
                        </p>
                    </div>
                </div>

                <div>
                    <div>
  <span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10">
    <!-- Heroicon name: outline/users -->
    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
    </svg>
  </span>
                    </div>
                    <div class="mt-6">
                        <h3 class="text-lg font-medium text-white">Manage Team Members</h3>
                        <p class="mt-2 text-base text-brand-200">
                            Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.
                        </p>
                    </div>
                </div>

                <div>
                    <div>
  <span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10">
    <!-- Heroicon name: outline/trash -->
    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
    </svg>
  </span>
                    </div>
                    <div class="mt-6">
                        <h3 class="text-lg font-medium text-white">Spam Report</h3>
                        <p class="mt-2 text-base text-brand-200">
                            Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.
                        </p>
                    </div>
                </div>

                <div>
                    <div>
  <span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10">
    <!-- Heroicon name: outline/pencil-alt -->
    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
    </svg>
  </span>
                    </div>
                    <div class="mt-6">
                        <h3 class="text-lg font-medium text-white">Compose in Markdown</h3>
                        <p class="mt-2 text-base text-brand-200">
                            Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.
                        </p>
                    </div>
                </div>

                <div>
                    <div>
  <span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10">
    <!-- Heroicon name: outline/document-report -->
    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
    </svg>
  </span>
                    </div>
                    <div class="mt-6">
                        <h3 class="text-lg font-medium text-white">Team Reporting</h3>
                        <p class="mt-2 text-base text-brand-200">
                            Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.
                        </p>
                    </div>
                </div>

                <div>
                    <div>
  <span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10">
    <!-- Heroicon name: outline/reply -->
    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
    </svg>
  </span>
                    </div>
                    <div class="mt-6">
                        <h3 class="text-lg font-medium text-white">Saved Replies</h3>
                        <p class="mt-2 text-base text-brand-200">
                            Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.
                        </p>
                    </div>
                </div>

                <div>
                    <div>
  <span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10">
    <!-- Heroicon name: outline/chat-alt -->
    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
    </svg>
  </span>
                    </div>
                    <div class="mt-6">
                        <h3 class="text-lg font-medium text-white">Email Commenting</h3>
                        <p class="mt-2 text-base text-brand-200">
                            Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.
                        </p>
                    </div>
                </div>

                <div>
                    <div>
  <span class="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10">
    <!-- Heroicon name: outline/heart -->
    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
    </svg>
  </span>
                    </div>
                    <div class="mt-6">
                        <h3 class="text-lg font-medium text-white">Connect with Customers</h3>
                        <p class="mt-2 text-base text-brand-200">
                            Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <div class="bg-white">
        <div class="max-w-4xl mx-auto py-16 px-4 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8 lg:flex lg:items-center lg:justify-between">
            <h2 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                <span class="block">Ready to get started?</span>
                <span class="block bg-gradient-to-r from-brand-600 to-brandsecondary-600 bg-clip-text text-transparent">Get in touch or create an account.</span>
            </h2>
            <div class="mt-6 space-y-4 sm:space-y-0 sm:flex sm:space-x-5">
                <a href="https://courses.cheerfullygiven.com/store" target="_blank" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-gradient-to-r from-brand-600 to-brandsecondary-600 hover:from-brand-700 hover:to-brandsecondary-700">
                    Learn more
                </a>
                <a href="https://courses.cheerfullygiven.com/store" target="_blank" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-brandsecondary-800 bg-brandsecondary-50 hover:bg-brandsecondary-100">
                    Get started
                </a>
            </div>
        </div>
    </div>

{% endblock %}