Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Revolutionize your B2B procurement with our next-generation buying platform. Streamline vendor selection, automate RFPs, and make data-driven decisions effortlessly."> | |
| <title>ProcureX | Next-Gen B2B Buying Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.02); | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .video-container { | |
| position: relative; | |
| padding-bottom: 56.25%; | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .video-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-box-open text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">ProcureX</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#features" class="text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a> | |
| <a href="#benefits" class="text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Benefits</a> | |
| <a href="#testimonials" class="text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Testimonials</a> | |
| <a href="#demo" class="text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Demo</a> | |
| <a href="#faq" class="text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">FAQ</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <a href="#cta" class="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Get Started | |
| </a> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Features</a> | |
| <a href="#benefits" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Benefits</a> | |
| <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Testimonials</a> | |
| <a href="#demo" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Demo</a> | |
| <a href="#faq" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">FAQ</a> | |
| </div> | |
| <div class="pt-4 pb-3 border-t border-gray-200"> | |
| <div class="mt-3 space-y-1 px-2"> | |
| <a href="#cta" class="block w-full px-4 py-2 text-center text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-md"> | |
| Get Started | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl"> | |
| Transform Your B2B Procurement Process | |
| </h1> | |
| <p class="mt-6 max-w-2xl mx-auto text-xl text-indigo-100"> | |
| The all-in-one platform that simplifies vendor selection, automates RFPs, and delivers data-driven insights to optimize your procurement strategy. | |
| </p> | |
| <div class="mt-10 flex justify-center space-x-4"> | |
| <a href="#cta" class="pulse-animation inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-indigo-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white"> | |
| Request a Demo | |
| </a> | |
| <a href="#demo" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Watch Video | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-16"> | |
| <div class="relative rounded-xl overflow-hidden shadow-2xl"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Procurement dashboard" class="w-full h-auto"> | |
| <div class="absolute inset-0 bg-indigo-900 bg-opacity-50 flex items-center justify-center"> | |
| <button class="bg-white rounded-full p-4 text-indigo-600 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white"> | |
| <i class="fas fa-play text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trusted By Section --> | |
| <div class="bg-gray-50 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <p class="text-center text-sm font-semibold uppercase text-gray-500 tracking-wide"> | |
| Trusted by procurement teams at | |
| </p> | |
| <div class="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5"> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg" alt="Tuple"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg" alt="Mirage"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg" alt="StaticKit"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg" alt="Transistor"> | |
| </div> | |
| <div class="col-span-1 flex justify-center"> | |
| <img class="h-12" src="https://tailwindui.com/img/logos/workcation-logo-gray-400.svg" alt="Workcation"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div id="features" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Everything you need to modernize procurement | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Our platform combines powerful tools with intuitive design to transform how you evaluate and select vendors. | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-white p-6 shadow-md hover:shadow-xl"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-file-alt text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Guided RFP Creation</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Create comprehensive RFPs in minutes with our intelligent templates and step-by-step guidance. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-white p-6 shadow-md hover:shadow-xl"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-filter text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Automated Vendor Filtering</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Our AI-powered system evaluates and ranks vendors based on your specific requirements. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-white p-6 shadow-md hover:shadow-xl"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-desktop text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Interactive Demos</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Experience vendor solutions in our secure demo environment without scheduling endless meetings. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-white p-6 shadow-md hover:shadow-xl"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-comments text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Vendor Interaction Rooms</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Dedicated spaces for each vendor to share materials, answer questions, and collaborate with your team. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-white p-6 shadow-md hover:shadow-xl"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-chart-bar text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Analytics Dashboard</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Real-time insights into vendor performance, pricing trends, and team feedback all in one place. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-white p-6 shadow-md hover:shadow-xl"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> | |
| <i class="fas fa-lock text-xl"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-900">Secure Data Rooms</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Enterprise-grade security for all your procurement documents and vendor communications. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Benefits Section --> | |
| <div id="benefits" class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Benefits</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Why procurement teams love ProcureX | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4"> | |
| <!-- Benefit 1 --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-clock text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">70% Time Savings</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500"> | |
| Reduce time spent on vendor evaluation and selection by automating manual processes. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Benefit 2 --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-dollar-sign text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">15-30% Cost Reduction</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500"> | |
| Achieve better pricing through competitive transparency and data-driven negotiations. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Benefit 3 --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-check-circle text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Better Decisions</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500"> | |
| Make confident choices with comprehensive vendor comparisons and team feedback. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Benefit 4 --> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i class="fas fa-users text-white text-xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Stakeholder Alignment</h3> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500"> | |
| Keep all decision-makers informed and engaged throughout the process. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Section --> | |
| <div class="mt-16 bg-indigo-700 rounded-lg shadow-xl overflow-hidden"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8 lg:py-20"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| Trusted by procurement teams worldwide | |
| </h2> | |
| <p class="mt-3 text-xl text-indigo-200"> | |
| Join thousands of companies transforming their procurement processes. | |
| </p> | |
| </div> | |
| <div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-3"> | |
| <div class="text-center"> | |
| <div class="text-5xl font-extrabold text-white"> | |
| <span class="counter" data-target="1200">0</span>+ | |
| </div> | |
| <div class="mt-2 text-base font-medium text-indigo-200"> | |
| Companies | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-extrabold text-white"> | |
| $<span class="counter" data-target="3.5">0</span>B+ | |
| </div> | |
| <div class="mt-2 text-base font-medium text-indigo-200"> | |
| In Procurement Spend | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-extrabold text-white"> | |
| <span class="counter" data-target="98">0</span>% | |
| </div> | |
| <div class="mt-2 text-base font-medium text-indigo-200"> | |
| Customer Satisfaction | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials Section --> | |
| <div id="testimonials" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Testimonials</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| What our customers say | |
| </p> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-gray-50 rounded-lg p-8"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Sarah Johnson</h3> | |
| <p class="text-indigo-600">CPO, TechCorp</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600"> | |
| "ProcureX has transformed our vendor selection process. What used to take weeks now takes days, and the quality of our vendor relationships has improved dramatically." | |
| </p> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-gray-50 rounded-lg p-8"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Michael Chen</h3> | |
| <p class="text-indigo-600">Director of Procurement, GlobalRetail</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600"> | |
| "The analytics alone are worth the investment. We've identified cost savings opportunities we never would have seen with our old manual processes." | |
| </p> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-gray-50 rounded-lg p-8"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1566492031773-4f4e44671857?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">David Rodriguez</h3> | |
| <p class="text-indigo-600">VP Operations, HealthPlus</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600"> | |
| "The vendor interaction rooms have been a game-changer for us. Our stakeholders can engage directly with vendors without endless meetings and email chains." | |
| </p> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Demo/Video Section --> | |
| <div id="demo" class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">See it in action</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| How ProcureX works | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Watch our 2-minute demo to see how ProcureX can transform your procurement process. | |
| </p> | |
| </div> | |
| <div class="mt-12 max-w-4xl mx-auto"> | |
| <div class="video-container rounded-xl shadow-2xl overflow-hidden"> | |
| <iframe src="https://www.youtube.com/embed/9No-FiEInLA?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#cta" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fas fa-calendar-alt mr-2"></i> Schedule a Personalized Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ Section --> | |
| <div id="faq" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">FAQs</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Frequently asked questions | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Everything you need to know about ProcureX. | |
| </p> | |
| </div> | |
| <div class="mt-12 max-w-3xl mx-auto"> | |
| <div class="space-y-6"> | |
| <!-- FAQ 1 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="accordion-toggle w-full px-6 py-4 text-left bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-lg font-medium text-gray-900">How does ProcureX integrate with our existing procurement systems?</span> | |
| <i class="fas fa-chevron-down text-indigo-600 transform transition-transform duration-200"></i> | |
| </div> | |
| </button> | |
| <div class="accordion-content px-6"> | |
| <div class="pb-4"> | |
| <p class="text-gray-600"> | |
| ProcureX offers seamless integration with all major ERP, procurement, and financial systems through our robust API. We also provide pre-built connectors for SAP Ariba, Coupa, Oracle, and other leading platforms. Our implementation team will work with your IT department to ensure a smooth integration process. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ 2 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="accordion-toggle w-full px-6 py-4 text-left bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-lg font-medium text-gray-900">What security measures are in place to protect our procurement data?</span> | |
| <i class="fas fa-chevron-down text-indigo-600 transform transition-transform duration-200"></i> | |
| </div> | |
| </button> | |
| <div class="accordion-content px-6"> | |
| <div class="pb-4"> | |
| <p class="text-gray-600"> | |
| Security is our top priority. ProcureX uses enterprise-grade encryption (AES-256) for data at rest and in transit. We're SOC 2 Type II certified and comply with GDPR, CCPA, and other global privacy regulations. All vendor interactions occur in secure, isolated environments with detailed audit logs and role-based access controls. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ 3 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="accordion-toggle w-full px-6 py-4 text-left bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-lg font-medium text-gray-900">How long does implementation typically take?</span> | |
| <i class="fas fa-chevron-down text-indigo-600 transform transition-transform duration-200"></i> | |
| </div> | |
| </button> | |
| <div class="accordion-content px-6"> | |
| <div class="pb-4"> | |
| <p class="text-gray-600"> | |
| Most customers are up and running within 2-4 weeks. Our implementation process includes configuration, data migration (if needed), user training, and testing. The exact timeline depends on the complexity of your procurement processes and any required integrations. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ 4 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="accordion-toggle w-full px-6 py-4 text-left bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-lg font-medium text-gray-900">Can we customize the platform to match our specific procurement workflows?</span> | |
| <i class="fas fa-chevron-down text-indigo-600 transform transition-transform duration-200"></i> | |
| </div> | |
| </button> | |
| <div class="accordion-content px-6"> | |
| <div class="pb-4"> | |
| <p class="text-gray-600"> | |
| Absolutely. ProcureX is designed to be highly configurable to match your organization's unique procurement policies and approval workflows. Our no-code configuration tools allow procurement administrators to modify evaluation criteria, approval chains, and reporting without developer assistance. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ 5 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="accordion-toggle w-full px-6 py-4 text-left bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-lg font-medium text-gray-900">What kind of training and support do you provide?</span> | |
| <i class="fas fa-chevron-down text-indigo-600 transform transition-transform duration-200"></i> | |
| </div> | |
| </button> | |
| <div class="accordion-content px-6"> | |
| <div class="pb-4"> | |
| <p class="text-gray-600"> | |
| We provide comprehensive onboarding training for administrators and end-users, along with detailed documentation and video tutorials. Our customer success team offers 24/5 support via email, chat, and phone, with guaranteed response times based on your service level. We also conduct quarterly business reviews to ensure you're getting maximum value from the platform. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Final CTA Section --> | |
| <div id="cta" class="gradient-bg"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Ready to transform your procurement process? | |
| </h2> | |
| <p class="mt-6 max-w-2xl mx-auto text-xl text-indigo-100"> | |
| Join thousands of procurement professionals who have streamlined their vendor selection and saved millions. | |
| </p> | |
| <div class="mt-10 flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-indigo-50 md:py-4 md:text-lg md:px-10"> | |
| Request a Demo | |
| </a> | |
| <a href="#" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> | |
| <i class="fas fa-phone-alt mr-2"></i> Speak to Sales | |
| </a> | |
| </div> | |
| <div class="mt-8"> | |
| <p class="text-sm text-indigo-200"> | |
| Limited-time offer: Sign up before June 30 and get 3 months free. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Integrations</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Updates</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Guides</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Webinars</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Partners</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Security</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Compliance</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-700 pt-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-youtube text-xl"></i> | |
| </a> | |
| </div> | |
| <p class="mt-4 md:mt-0 text-base text-gray-400"> | |
| © 2023 ProcureX. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Accordion functionality | |
| const accordionToggles = document.querySelectorAll('.accordion-toggle'); | |
| accordionToggles.forEach(toggle => { | |
| toggle.addEventListener('click', function() { | |
| const content = this.nextElementSibling; | |
| const icon = this.querySelector('i'); | |
| if (content.style.maxHeight) { | |
| content.style.maxHeight = null; | |
| icon.classList.remove('rotate-180'); | |
| icon.classList.add('rotate-0'); | |
| } else { | |
| content.style.maxHeight = content.scrollHeight + 'px'; | |
| icon.classList.remove('rotate-0'); | |
| icon.classList.add('rotate-180'); | |
| } | |
| }); | |
| }); | |
| // Counter animation | |
| function animateCounters() { | |
| const counters = document.querySelectorAll('.counter'); | |
| const speed = 200; | |
| counters.forEach(counter => { | |
| const target = +counter.getAttribute('data-target'); | |
| const count = +counter.innerText; | |
| const increment = target / speed; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + increment); | |
| setTimeout(animateCounters, 1); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| }); | |
| } | |
| // Intersection Observer for counter animation | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateCounters(); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, {threshold: 0.5}); | |
| const statsSection = document.querySelector('.bg-indigo-700'); | |
| if (statsSection) { | |
| observer.observe(statsSection); | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rohitvaddepalli/b2b" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |