@extends('v2.layouts.app')
@section('title', 'About Columbus17 | Amazon Product & Keyword Research Tool | Columbus17')
@section('meta_description', 'Learn more about Columbus17 — the all-in-one platform helping Amazon sellers find winning products, analyze keywords, and stay ahead of competitors with data-driven insights.')
@section('content')
    <section class="-mt-24 pt-40 pb-12 bg-blueGray-100">
            <div class="container">
                <h1 class="text-2xl lg:text-4xl font-bold mb-5 wow animate__animated animate__fadeInUp animated">Columbus17 About Us</h1>
                <ul class="flex text-gray-500 text-sm lg:text-sm pb-12 wow animate__animated animate__fadeInUp animated">
                    <li class="inline-flex items-center">
                        <a href="{{ route('home') }}" class="hover:text-blue-500 text-gray-800">Home</a>
                        <svg fill="currentColor" viewBox="0 0 20 20" class="h-5 w-auto text-gray-300">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                    </li>
                    <li class="inline-flex items-center text-gray-400">
                        <span>About Us</span>
                    </li>
                </ul>
            </div>
    </section>
    <section class="relative -mt-24 pt-24">
        <div class="hidden lg:block absolute inset-0 w-1/2 ml-auto bg-blueGray-100 z-0" style="z-index: -1"></div>
        <div class="container">
            <div class="flex flex-wrap items-center -mx-3">
                <div class="w-full lg:w-1/2 px-3">
                    <div class="py-12">
                        <div class="max-w-lg lg:max-w-md mx-auto lg:mx-0 mb-8 text-center lg:text-left">
                            <h2 class="text-3xl lg:text-4xl mb-4 font-bold font-heading wow animate__animatedanimated animate__fadeIn">Modernize Your Amazon <br />Journey with <span class="text-blue-500">Columbus17</span></h2>
                            <p class="text-blueGray-400 leading-relaxed wow animate__animatedanimated animate__fadeIn h-12">Your success on Amazon starts with the right data and <strong class="text-blue-500">Columbus17</strong><span class="typewrite d-inline text-brand" data-period="3000" data-type='[" puts that power in your hands." ]'></span></p>
                            <p class="text-blueGray-400 leading-relaxed wow animate__animatedanimated animate__fadeIn mt-3 text-sm">At Columbus17, we believe that finding the right product at the right time is the key to success on Amazon. That’s why we’ve built a powerful platform that gives sellers everything they need to research, analyze, and launch winning products — faster and smarter than ever before.</p>
                            <p class="text-blueGray-400 leading-relaxed wow animate__animatedanimated animate__fadeIn mt-3 text-sm">Our mission is simple: empower Amazon sellers with accurate data, smart insights, and easy-to-use tools so they can grow their business with confidence.</p>
                        </div>
                        <div class="text-center lg:text-left">
                            <a class="tracking-wide hover-up-2 block sm:inline-block py-4 px-8 mb-4 sm:mb-0 sm:mr-3 text-xs text-white text-center font-semibold leading-none bg-blue-400 hover:bg-blue-500 rounded wow animate__animatedanimated animate__fadeInUp" href="{{ url('https://columbus17.com#key-features') }}">Key Features</a>
                            <a class="block hover-up-2 sm:inline-block py-4 px-8 text-xs text-blueGray-500 hover:text-blueGray-600 text-center font-semibold leading-none bg-white border border-blueGray-200 hover:border-blueGray-300 rounded wow animate__animatedanimated animate__fadeInUp" data-wow-delay=".3s" href="{{ url('https://columbus17.com#how-we-work') }}">How We Work?</a>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 px-3 lg:bg-blueGray-10 mb-12 lg:mb-0 pb-10">
                    <div class="flex items-center justify-center">
                        <img class="lg:max-w-lg" src="{{ asset('storage/imgs/illustrations/web.svg') }}" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection