Your Name
2066 lines
106 KiB
HTML
2066 lines
106 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>PointOS — Smart POS for Restaurants, Bars & Retail</title>
|
||
<meta
|
||
name="description"
|
||
content="From single-location restaurants to multi-site retail chains — one platform handles orders, inventory, payments, staff, and reporting."
|
||
/>
|
||
<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"
|
||
/>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
brand: "#714B67",
|
||
"brand-dark": "#4a3c5a",
|
||
accent: "#FF6D5A",
|
||
dark: "#1f1f2e",
|
||
},
|
||
fontFamily: {
|
||
sans: [
|
||
"Inter",
|
||
"system-ui",
|
||
"-apple-system",
|
||
"sans-serif",
|
||
],
|
||
},
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
|
||
|
||
.gradient-hero {
|
||
background: linear-gradient(135deg, #1f1f2e 0%, #2d1f3d 100%);
|
||
}
|
||
.industry-card {
|
||
transition:
|
||
transform 0.25s ease,
|
||
box-shadow 0.25s ease;
|
||
display: block;
|
||
color: inherit;
|
||
}
|
||
.industry-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.feature-card {
|
||
transition:
|
||
transform 0.25s ease,
|
||
box-shadow 0.25s ease;
|
||
}
|
||
.feature-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 30px rgba(113, 75, 103, 0.12);
|
||
}
|
||
.btn-brand {
|
||
background: linear-gradient(135deg, #714b67 0%, #5a3d52 100%);
|
||
transition: all 0.25s ease;
|
||
}
|
||
.btn-brand:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 20px rgba(113, 75, 103, 0.3);
|
||
}
|
||
.btn-accent {
|
||
background: linear-gradient(135deg, #ff6d5a 0%, #ff5242 100%);
|
||
transition: all 0.25s ease;
|
||
}
|
||
.btn-accent:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 20px rgba(255, 109, 90, 0.3);
|
||
}
|
||
.faq-answer {
|
||
display: none;
|
||
}
|
||
.faq-item.open .faq-answer {
|
||
display: block;
|
||
}
|
||
.faq-icon {
|
||
transition: transform 0.2s ease;
|
||
}
|
||
.faq-item.open .faq-icon {
|
||
transform: rotate(45deg);
|
||
}
|
||
.pulse-dot {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
@keyframes pulse {
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.4;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-white text-gray-800 font-sans">
|
||
<!-- ─── Navigation ──────────────────────────────────────────────────── -->
|
||
<nav id="navbar" class="bg-white shadow-sm 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">
|
||
<a href="#" class="flex flex-col leading-tight">
|
||
<span class="text-2xl font-bold text-brand"
|
||
>Point<span class="text-accent">OS</span></span
|
||
>
|
||
<span
|
||
class="text-[10px] text-gray-400 font-medium tracking-wide -mt-0.5"
|
||
>by ODOO4projects × ArrowScan</span
|
||
>
|
||
</a>
|
||
</div>
|
||
<div class="hidden md:flex items-center space-x-7">
|
||
<a
|
||
href="#industries"
|
||
class="text-gray-600 hover:text-brand transition-colors text-sm font-medium"
|
||
>Industries</a
|
||
>
|
||
<a
|
||
href="#features"
|
||
class="text-gray-600 hover:text-brand transition-colors text-sm font-medium"
|
||
>Features</a
|
||
>
|
||
<a
|
||
href="#how-it-works"
|
||
class="text-gray-600 hover:text-brand transition-colors text-sm font-medium"
|
||
>How It Works</a
|
||
>
|
||
<a
|
||
href="#faq"
|
||
class="text-gray-600 hover:text-brand transition-colors text-sm font-medium"
|
||
>FAQ</a
|
||
>
|
||
<a
|
||
href="#trial"
|
||
class="text-gray-600 hover:text-brand transition-colors text-sm font-medium"
|
||
>Try Free</a
|
||
>
|
||
</div>
|
||
<div class="hidden md:flex items-center gap-3">
|
||
<a
|
||
href="#trial"
|
||
class="text-sm font-semibold text-brand border-2 border-brand px-5 py-2 rounded-xl hover:bg-brand/5 transition-colors"
|
||
>
|
||
Schedule Demo
|
||
</a>
|
||
<a
|
||
href="https://apps.odoo4projects.com/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="btn-accent text-white text-sm font-semibold px-5 py-2 rounded-xl"
|
||
>
|
||
Start Free Trial
|
||
</a>
|
||
</div>
|
||
<div class="md:hidden flex items-center">
|
||
<button
|
||
id="mobile-menu-button"
|
||
class="text-gray-600 hover:text-brand p-2"
|
||
>
|
||
<i class="fas fa-bars text-xl"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
id="mobile-menu"
|
||
class="hidden md:hidden bg-white border-t px-4 py-3 space-y-3"
|
||
>
|
||
<a
|
||
href="#industries"
|
||
class="block text-gray-600 hover:text-brand text-sm py-1"
|
||
>Industries</a
|
||
>
|
||
<a
|
||
href="#features"
|
||
class="block text-gray-600 hover:text-brand text-sm py-1"
|
||
>Features</a
|
||
>
|
||
<a
|
||
href="#how-it-works"
|
||
class="block text-gray-600 hover:text-brand text-sm py-1"
|
||
>How It Works</a
|
||
>
|
||
<a
|
||
href="#faq"
|
||
class="block text-gray-600 hover:text-brand text-sm py-1"
|
||
>FAQ</a
|
||
>
|
||
<a
|
||
href="#trial"
|
||
class="block text-gray-600 hover:text-brand text-sm py-1"
|
||
>Try Free</a
|
||
>
|
||
<div class="pt-2 flex flex-col gap-2 pb-2">
|
||
<a
|
||
href="#trial"
|
||
class="text-sm font-semibold text-brand border-2 border-brand px-5 py-2.5 rounded-xl text-center hover:bg-brand/5 transition-colors"
|
||
>Schedule Demo</a
|
||
>
|
||
<a
|
||
href="https://apps.odoo4projects.com/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="btn-accent text-white text-sm font-semibold px-5 py-2.5 rounded-xl text-center"
|
||
>Start Free Trial</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- ─── Hero ───────────────────────────────────────────────────────── -->
|
||
<section class="gradient-hero text-white py-24 md:py-36">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="max-w-3xl mx-auto text-center">
|
||
<div class="inline-flex items-center gap-2.5 mb-6">
|
||
<span
|
||
class="flex items-center gap-2 text-xs font-semibold tracking-widest uppercase text-purple-300"
|
||
>
|
||
<span
|
||
class="w-2 h-2 rounded-full bg-green-400 pulse-dot inline-block"
|
||
></span>
|
||
Live POS Platform
|
||
</span>
|
||
<span
|
||
class="bg-white/10 border border-white/20 text-white text-xs font-bold px-2.5 py-1 rounded-full"
|
||
>ODOO4projects</span
|
||
>
|
||
<span
|
||
class="bg-white/10 border border-white/20 text-white text-xs font-bold px-2.5 py-1 rounded-full"
|
||
>× ArrowScan</span
|
||
>
|
||
</div>
|
||
<h1
|
||
class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6"
|
||
>
|
||
The POS Platform That Works
|
||
<span class="text-accent"> As Hard As You Do</span>
|
||
</h1>
|
||
<p class="text-xl text-gray-300 mb-10 leading-relaxed">
|
||
Seamlessly manage sales, inventory, staff, and customers
|
||
— all from one powerful platform. Whether you run a
|
||
restaurant, bar, kiosk, or retail shop.
|
||
</p>
|
||
<div
|
||
class="flex flex-col sm:flex-row gap-4 justify-center mb-8"
|
||
>
|
||
<a
|
||
href="https://apps.odoo4projects.com/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="btn-accent text-white px-8 py-4 rounded-xl font-semibold text-lg text-center"
|
||
>
|
||
Start Free Trial
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</a>
|
||
<a
|
||
href="#trial"
|
||
class="bg-white/10 hover:bg-white/20 text-white px-8 py-4 rounded-xl font-semibold text-lg text-center transition-colors border border-white/20"
|
||
>
|
||
<i class="fas fa-calendar-alt mr-2"></i> Schedule a
|
||
Meeting
|
||
</a>
|
||
</div>
|
||
<div
|
||
class="flex flex-wrap justify-center gap-5 text-sm text-gray-400"
|
||
>
|
||
<span class="flex items-center gap-1.5"
|
||
><i class="fas fa-check text-green-400 text-xs"></i>
|
||
No credit card required</span
|
||
>
|
||
<span class="flex items-center gap-1.5"
|
||
><i class="fas fa-check text-green-400 text-xs"></i>
|
||
Up and running in minutes</span
|
||
>
|
||
<span class="flex items-center gap-1.5"
|
||
><i class="fas fa-check text-green-400 text-xs"></i>
|
||
US-based support from ArrowScan</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── Stats Strip ────────────────────────────────────────────────── -->
|
||
<section class="bg-dark py-10 border-y border-white/5">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div
|
||
class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center text-white divide-x divide-white/10"
|
||
>
|
||
<div>
|
||
<div class="text-3xl font-bold text-accent mb-1">
|
||
500+
|
||
</div>
|
||
<div class="text-sm text-gray-400">
|
||
Businesses Served
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-3xl font-bold text-accent mb-1">
|
||
$2.4B+
|
||
</div>
|
||
<div class="text-sm text-gray-400">
|
||
Transactions Processed
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-3xl font-bold text-accent mb-1">
|
||
99.9%
|
||
</div>
|
||
<div class="text-sm text-gray-400">Platform Uptime</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-3xl font-bold text-accent mb-1">
|
||
4 Weeks
|
||
</div>
|
||
<div class="text-sm text-gray-400">
|
||
Free Trial — No Card
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── Value Props ────────────────────────────────────────────────── -->
|
||
<section class="py-16 bg-gray-50">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-12">
|
||
<div
|
||
class="text-sm font-semibold tracking-widest uppercase text-brand mb-3"
|
||
>
|
||
Why PointOS
|
||
</div>
|
||
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">
|
||
Built for real business, not demos
|
||
</h2>
|
||
<p class="text-lg text-gray-500 max-w-2xl mx-auto">
|
||
A joint venture between ODOO4projects and ArrowScan
|
||
brings enterprise-grade point of sale to businesses of
|
||
every size — from single-location cafés to national
|
||
chains.
|
||
</p>
|
||
</div>
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
<div class="bg-white rounded-2xl p-8 shadow-sm">
|
||
<div
|
||
class="w-12 h-12 bg-brand/10 rounded-xl flex items-center justify-center text-brand text-xl mb-5"
|
||
>
|
||
<i class="fas fa-wifi"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-dark mb-2">
|
||
Works Offline
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Never miss a sale when internet drops. All
|
||
transactions are stored locally and synced
|
||
automatically the moment connectivity returns.
|
||
</p>
|
||
</div>
|
||
<div class="bg-white rounded-2xl p-8 shadow-sm">
|
||
<div
|
||
class="w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center text-accent text-xl mb-5"
|
||
>
|
||
<i class="fas fa-chart-line"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-dark mb-2">
|
||
Real-Time Analytics
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Live dashboards show sales, staff performance, and
|
||
inventory levels across all your locations — updated
|
||
instantly with every transaction.
|
||
</p>
|
||
</div>
|
||
<div class="bg-white rounded-2xl p-8 shadow-sm">
|
||
<div
|
||
class="w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center text-green-600 text-xl mb-5"
|
||
>
|
||
<i class="fas fa-link"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-dark mb-2">
|
||
Fully Integrated
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Inventory, accounting, CRM, and eCommerce sync
|
||
automatically. Every sale updates your stock, books
|
||
your revenue, and tracks your customers.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── Industries ─────────────────────────────────────────────────── -->
|
||
<section id="industries" class="py-20">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-14">
|
||
<div
|
||
class="text-sm font-semibold tracking-widest uppercase text-brand mb-3"
|
||
>
|
||
Industries
|
||
</div>
|
||
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">
|
||
Built for Every Venue
|
||
</h2>
|
||
<p class="text-lg text-gray-500 max-w-2xl mx-auto">
|
||
One platform adapts to your environment — whether you're
|
||
running a fine dining room, a delivery kitchen, or a
|
||
high-volume kiosk line.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Fine Dining -->
|
||
<div
|
||
class="industry-card bg-white rounded-2xl shadow-md overflow-hidden mb-10 border border-gray-100"
|
||
>
|
||
<div class="md:flex">
|
||
<div
|
||
class="md:w-72 bg-dark p-8 text-white flex-shrink-0 flex flex-col"
|
||
>
|
||
<div class="flex-1">
|
||
<div class="text-4xl mb-5">🍽️</div>
|
||
<h3 class="text-xl font-bold mb-1">
|
||
Fine Dining
|
||
</h3>
|
||
<p class="text-gray-500 text-xs font-mono mb-4">
|
||
Full-service restaurant POS
|
||
</p>
|
||
<div class="flex gap-1.5 flex-wrap">
|
||
<span
|
||
class="bg-white/10 text-gray-300 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-white/15"
|
||
>Table Mgmt</span
|
||
>
|
||
<span
|
||
class="bg-white/10 text-gray-300 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-white/15"
|
||
>Split Bills</span
|
||
>
|
||
<span
|
||
class="bg-purple-500/30 text-purple-200 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-purple-400/30"
|
||
>Course Flow</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="mt-6 pt-5 border-t border-white/10">
|
||
<div
|
||
class="flex items-center gap-2.5 bg-white/5 hover:bg-white/10 transition-colors rounded-xl px-3 py-2.5"
|
||
>
|
||
<div
|
||
class="w-7 h-7 bg-accent/20 rounded-lg flex items-center justify-center flex-shrink-0"
|
||
>
|
||
<i
|
||
class="fas fa-utensils text-accent text-xs"
|
||
></i>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p
|
||
class="text-white text-[11px] font-semibold leading-tight"
|
||
>
|
||
Full Service POS
|
||
</p>
|
||
<p class="text-gray-500 text-[10px]">
|
||
Table, bar & kitchen sync
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-8 flex-1">
|
||
<h4 class="text-lg font-semibold text-dark mb-3">
|
||
Elevate the dining experience with precision
|
||
management
|
||
</h4>
|
||
<p
|
||
class="text-gray-500 text-sm leading-relaxed mb-5"
|
||
>
|
||
Designed for upscale restaurants where every
|
||
detail counts. Manage tables, courses, and guest
|
||
preferences with a system built for speed and
|
||
elegance. Synchronize your front-of-house with
|
||
the kitchen in real time — no shouted orders, no
|
||
lost tickets.
|
||
</p>
|
||
<div class="grid sm:grid-cols-2 gap-3 mb-5">
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Table layout & reservation management
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Split bills & multi-guest payments
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Course timing & kitchen display sync
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Sommelier notes & wine pairing tags
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Guest allergy & preference tracking
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Tip management & gratuity automation
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="inline-flex items-center gap-2 bg-brand/5 border border-brand/20 text-brand text-xs font-semibold px-4 py-2 rounded-full"
|
||
>
|
||
<i class="fas fa-star"></i>
|
||
Trusted by fine dining establishments across the
|
||
US
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Fast & Casual -->
|
||
<div
|
||
class="industry-card bg-white rounded-2xl shadow-md overflow-hidden mb-10 border border-gray-100"
|
||
>
|
||
<div class="md:flex">
|
||
<div
|
||
class="md:w-72 bg-dark p-8 text-white flex-shrink-0 flex flex-col"
|
||
>
|
||
<div class="flex-1">
|
||
<div class="text-4xl mb-5">🍔</div>
|
||
<h3 class="text-xl font-bold mb-1">
|
||
Fast & Casual Food
|
||
</h3>
|
||
<p class="text-gray-500 text-xs font-mono mb-4">
|
||
High-volume counter service
|
||
</p>
|
||
<div class="flex gap-1.5 flex-wrap">
|
||
<span
|
||
class="bg-white/10 text-gray-300 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-white/15"
|
||
>Quick Orders</span
|
||
>
|
||
<span
|
||
class="bg-white/10 text-gray-300 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-white/15"
|
||
>Combos</span
|
||
>
|
||
<span
|
||
class="bg-purple-500/30 text-purple-200 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-purple-400/30"
|
||
>Loyalty</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="mt-6 pt-5 border-t border-white/10">
|
||
<div
|
||
class="flex items-center gap-2.5 bg-white/5 hover:bg-white/10 transition-colors rounded-xl px-3 py-2.5"
|
||
>
|
||
<div
|
||
class="w-7 h-7 bg-accent/20 rounded-lg flex items-center justify-center flex-shrink-0"
|
||
>
|
||
<i
|
||
class="fas fa-bolt text-accent text-xs"
|
||
></i>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p
|
||
class="text-white text-[11px] font-semibold leading-tight"
|
||
>
|
||
Speed-First POS
|
||
</p>
|
||
<p class="text-gray-500 text-[10px]">
|
||
Built for rush hour throughput
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-8 flex-1">
|
||
<h4 class="text-lg font-semibold text-dark mb-3">
|
||
Maximum throughput during your busiest hours
|
||
</h4>
|
||
<p
|
||
class="text-gray-500 text-sm leading-relaxed mb-5"
|
||
>
|
||
Built for speed without sacrificing accuracy.
|
||
Take orders faster, send them directly to the
|
||
kitchen display, and keep the line moving.
|
||
Loyalty programs and combo deals are built right
|
||
in — no third-party apps needed.
|
||
</p>
|
||
<div class="grid sm:grid-cols-2 gap-3 mb-5">
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
One-tap combo & meal deal builder
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Direct kitchen display integration
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Loyalty points & rewards programs
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Order number & queue display
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Rush-hour reporting & peak analysis
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Customizable menu & modifier groups
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="inline-flex items-center gap-2 bg-accent/5 border border-accent/20 text-accent text-xs font-semibold px-4 py-2 rounded-full"
|
||
>
|
||
<i class="fas fa-fire"></i>
|
||
Handles 300+ orders per hour with zero lag
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Takeout & Delivery -->
|
||
<div
|
||
class="industry-card bg-white rounded-2xl shadow-md overflow-hidden mb-10 border border-gray-100"
|
||
>
|
||
<div class="md:flex">
|
||
<div
|
||
class="md:w-72 bg-dark p-8 text-white flex-shrink-0 flex flex-col"
|
||
>
|
||
<div class="flex-1">
|
||
<div class="text-4xl mb-5">🥡</div>
|
||
<h3 class="text-xl font-bold mb-1">
|
||
Takeout & Delivery
|
||
</h3>
|
||
<p class="text-gray-500 text-xs font-mono mb-4">
|
||
Unified multi-channel ordering
|
||
</p>
|
||
<div class="flex gap-1.5 flex-wrap">
|
||
<span
|
||
class="bg-white/10 text-gray-300 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-white/15"
|
||
>Online Sync</span
|
||
>
|
||
<span
|
||
class="bg-white/10 text-gray-300 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-white/15"
|
||
>Label Print</span
|
||
>
|
||
<span
|
||
class="bg-purple-500/30 text-purple-200 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-purple-400/30"
|
||
>ETA</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="mt-6 pt-5 border-t border-white/10">
|
||
<div
|
||
class="flex items-center gap-2.5 bg-white/5 hover:bg-white/10 transition-colors rounded-xl px-3 py-2.5"
|
||
>
|
||
<div
|
||
class="w-7 h-7 bg-accent/20 rounded-lg flex items-center justify-center flex-shrink-0"
|
||
>
|
||
<i
|
||
class="fas fa-motorcycle text-accent text-xs"
|
||
></i>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p
|
||
class="text-white text-[11px] font-semibold leading-tight"
|
||
>
|
||
Delivery-Ready POS
|
||
</p>
|
||
<p class="text-gray-500 text-[10px]">
|
||
In-store & online unified
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-8 flex-1">
|
||
<h4 class="text-lg font-semibold text-dark mb-3">
|
||
One screen for walk-ins, call-ins, and online
|
||
orders
|
||
</h4>
|
||
<p
|
||
class="text-gray-500 text-sm leading-relaxed mb-5"
|
||
>
|
||
Stop juggling multiple tablets. PointOS unifies
|
||
walk-in, phone, and online orders into a single
|
||
queue. Print packaging labels, track driver
|
||
status, and keep customers updated on their ETA
|
||
— all from one screen, with ArrowScan hardware
|
||
built for the job.
|
||
</p>
|
||
<div class="grid sm:grid-cols-2 gap-3 mb-5">
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Online order aggregation & sync
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Driver dispatch & status tracking
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Packaging label printing
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Customer ETA notifications via SMS
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Unified queue across all channels
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Prep time & capacity management
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="inline-flex items-center gap-2 bg-brand/5 border border-brand/20 text-brand text-xs font-semibold px-4 py-2 rounded-full"
|
||
>
|
||
<i class="fas fa-globe"></i>
|
||
Integrates with major delivery platforms
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Kiosk -->
|
||
<div
|
||
class="industry-card bg-white rounded-2xl shadow-md overflow-hidden mb-10 border border-gray-100"
|
||
>
|
||
<div class="md:flex">
|
||
<div
|
||
class="md:w-72 bg-dark p-8 text-white flex-shrink-0 flex flex-col"
|
||
>
|
||
<div class="flex-1">
|
||
<div class="text-4xl mb-5">📟</div>
|
||
<h3 class="text-xl font-bold mb-1">
|
||
Self-Service Kiosk
|
||
</h3>
|
||
<p class="text-gray-500 text-xs font-mono mb-4">
|
||
Touch-screen ordering & payment
|
||
</p>
|
||
<div class="flex gap-1.5 flex-wrap">
|
||
<span
|
||
class="bg-white/10 text-gray-300 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-white/15"
|
||
>Touch Screen</span
|
||
>
|
||
<span
|
||
class="bg-white/10 text-gray-300 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-white/15"
|
||
>Self-Pay</span
|
||
>
|
||
<span
|
||
class="bg-purple-500/30 text-purple-200 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-purple-400/30"
|
||
>Upsell AI</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="mt-6 pt-5 border-t border-white/10">
|
||
<div
|
||
class="flex items-center gap-2.5 bg-white/5 hover:bg-white/10 transition-colors rounded-xl px-3 py-2.5"
|
||
>
|
||
<div
|
||
class="w-7 h-7 bg-accent/20 rounded-lg flex items-center justify-center flex-shrink-0"
|
||
>
|
||
<i
|
||
class="fas fa-desktop text-accent text-xs"
|
||
></i>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p
|
||
class="text-white text-[11px] font-semibold leading-tight"
|
||
>
|
||
ArrowScan Hardware
|
||
</p>
|
||
<p class="text-gray-500 text-[10px]">
|
||
Pre-configured kiosk units
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-8 flex-1">
|
||
<h4 class="text-lg font-semibold text-dark mb-3">
|
||
Let customers order themselves — and spend more
|
||
doing it
|
||
</h4>
|
||
<p
|
||
class="text-gray-500 text-sm leading-relaxed mb-5"
|
||
>
|
||
Self-service kiosks reduce wait times, cut
|
||
staffing costs, and consistently upsell.
|
||
Customers browsing visually-rich menus at their
|
||
own pace spend 15–30% more per order. ArrowScan
|
||
provides the pre-configured hardware; we handle
|
||
the software end-to-end.
|
||
</p>
|
||
<div class="grid sm:grid-cols-2 gap-3 mb-5">
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Full-screen touch-optimized UI
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Smart upsell & add-on prompts
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Integrated card & contactless payment
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Order queue & number display
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Allergen & nutritional info display
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Multi-language interface support
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="inline-flex items-center gap-2 bg-accent/5 border border-accent/20 text-accent text-xs font-semibold px-4 py-2 rounded-full"
|
||
>
|
||
<i class="fas fa-arrow-up"></i>
|
||
Average 22% increase in order value vs. counter
|
||
ordering
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bar & Nightlife -->
|
||
<div
|
||
class="industry-card bg-white rounded-2xl shadow-md overflow-hidden mb-10 border border-gray-100"
|
||
>
|
||
<div class="md:flex">
|
||
<div
|
||
class="md:w-72 bg-dark p-8 text-white flex-shrink-0 flex flex-col"
|
||
>
|
||
<div class="flex-1">
|
||
<div class="text-4xl mb-5">🍺</div>
|
||
<h3 class="text-xl font-bold mb-1">
|
||
Bar & Nightlife
|
||
</h3>
|
||
<p class="text-gray-500 text-xs font-mono mb-4">
|
||
Tab management & compliance
|
||
</p>
|
||
<div class="flex gap-1.5 flex-wrap">
|
||
<span
|
||
class="bg-white/10 text-gray-300 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-white/15"
|
||
>Tab Mgmt</span
|
||
>
|
||
<span
|
||
class="bg-white/10 text-gray-300 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-white/15"
|
||
>Happy Hour</span
|
||
>
|
||
<span
|
||
class="bg-purple-500/30 text-purple-200 text-[11px] font-semibold px-2.5 py-0.5 rounded-full border border-purple-400/30"
|
||
>Age Check</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="mt-6 pt-5 border-t border-white/10">
|
||
<div
|
||
class="flex items-center gap-2.5 bg-white/5 hover:bg-white/10 transition-colors rounded-xl px-3 py-2.5"
|
||
>
|
||
<div
|
||
class="w-7 h-7 bg-accent/20 rounded-lg flex items-center justify-center flex-shrink-0"
|
||
>
|
||
<i
|
||
class="fas fa-glass-martini-alt text-accent text-xs"
|
||
></i>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p
|
||
class="text-white text-[11px] font-semibold leading-tight"
|
||
>
|
||
Bar-Mode Interface
|
||
</p>
|
||
<p class="text-gray-500 text-[10px]">
|
||
Optimized for speed & dark
|
||
venues
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-8 flex-1">
|
||
<h4 class="text-lg font-semibold text-dark mb-3">
|
||
Keep the drinks flowing and the tabs under
|
||
control
|
||
</h4>
|
||
<p
|
||
class="text-gray-500 text-sm leading-relaxed mb-5"
|
||
>
|
||
Bar mode is built for speed in noisy,
|
||
fast-moving environments. Open and manage
|
||
multiple tabs simultaneously, auto-apply happy
|
||
hour discounts, verify customer age on the spot,
|
||
and track your spirits inventory down to the
|
||
pour.
|
||
</p>
|
||
<div class="grid sm:grid-cols-2 gap-3 mb-5">
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Open tabs & card pre-authorization
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Age verification at point of sale
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Happy hour auto-pricing by time slot
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Drink inventory & bottle tracking
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
Multiple bartender logins & cash drawers
|
||
</div>
|
||
<div
|
||
class="flex items-start gap-2 text-sm text-gray-600"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"
|
||
></i>
|
||
End-of-night reconciliation reports
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="inline-flex items-center gap-2 bg-brand/5 border border-brand/20 text-brand text-xs font-semibold px-4 py-2 rounded-full"
|
||
>
|
||
<i class="fas fa-shield-alt"></i>
|
||
Compliance-ready with built-in age verification
|
||
logs
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── Features ───────────────────────────────────────────────────── -->
|
||
<section id="features" class="py-20 bg-gray-50">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-14">
|
||
<div
|
||
class="text-sm font-semibold tracking-widest uppercase text-brand mb-3"
|
||
>
|
||
Platform Features
|
||
</div>
|
||
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">
|
||
Everything You Need to Run Smarter
|
||
</h2>
|
||
<p class="text-lg text-gray-500 max-w-2xl mx-auto">
|
||
Every capability you'd expect from enterprise software —
|
||
without the enterprise price tag or the 12-month
|
||
implementation project.
|
||
</p>
|
||
</div>
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<div
|
||
class="feature-card bg-white rounded-2xl p-8 shadow-sm border border-gray-100"
|
||
>
|
||
<div
|
||
class="w-12 h-12 bg-brand/10 rounded-xl flex items-center justify-center text-brand text-xl mb-5"
|
||
>
|
||
<i class="fas fa-wifi"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-dark mb-2">
|
||
Works Offline
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Never lose a sale. All data is stored locally and
|
||
synced automatically the moment your connection
|
||
returns. Zero interruption to your business.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="feature-card bg-white rounded-2xl p-8 shadow-sm border border-gray-100"
|
||
>
|
||
<div
|
||
class="w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center text-accent text-xl mb-5"
|
||
>
|
||
<i class="fas fa-chart-bar"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-dark mb-2">
|
||
Real-Time Analytics
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Live dashboards, daily reports, staff performance
|
||
scoring, and peak-hour insights — across all your
|
||
locations from a single view.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="feature-card bg-white rounded-2xl p-8 shadow-sm border border-gray-100"
|
||
>
|
||
<div
|
||
class="w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center text-green-600 text-xl mb-5"
|
||
>
|
||
<i class="fas fa-project-diagram"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-dark mb-2">
|
||
Fully Integrated
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Inventory, accounting, CRM, and eCommerce sync
|
||
automatically. Every sale updates your stock, books
|
||
your revenue, and tracks your customers.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="feature-card bg-white rounded-2xl p-8 shadow-sm border border-gray-100"
|
||
>
|
||
<div
|
||
class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center text-blue-600 text-xl mb-5"
|
||
>
|
||
<i class="fas fa-credit-card"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-dark mb-2">
|
||
Any Payment Method
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Cash, chip card, contactless, Apple Pay, Google Pay,
|
||
and digital wallets — all processed through
|
||
ArrowScan-certified payment terminals.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="feature-card bg-white rounded-2xl p-8 shadow-sm border border-gray-100"
|
||
>
|
||
<div
|
||
class="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center text-purple-600 text-xl mb-5"
|
||
>
|
||
<i class="fas fa-tablet-alt"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-dark mb-2">
|
||
Any Device
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Runs on iPad, Android tablet, desktop, mobile, and
|
||
ArrowScan's purpose-built kiosk hardware. One
|
||
software license, any screen.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="feature-card bg-white rounded-2xl p-8 shadow-sm border border-gray-100"
|
||
>
|
||
<div
|
||
class="w-12 h-12 bg-red-500/10 rounded-xl flex items-center justify-center text-red-600 text-xl mb-5"
|
||
>
|
||
<i class="fas fa-shield-alt"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-dark mb-2">
|
||
Bank-Grade Security
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
PCI-DSS compliant, end-to-end encrypted
|
||
transactions, role-based access control, and full
|
||
audit trails. Your data stays protected.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="feature-card bg-white rounded-2xl p-8 shadow-sm border border-gray-100"
|
||
>
|
||
<div
|
||
class="w-12 h-12 bg-yellow-500/10 rounded-xl flex items-center justify-center text-yellow-600 text-xl mb-5"
|
||
>
|
||
<i class="fas fa-boxes"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-dark mb-2">
|
||
Live Inventory
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Every sale automatically deducts from stock. Get
|
||
low-stock alerts, reorder suggestions, and
|
||
multi-location inventory visibility in real time.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="feature-card bg-white rounded-2xl p-8 shadow-sm border border-gray-100"
|
||
>
|
||
<div
|
||
class="w-12 h-12 bg-pink-500/10 rounded-xl flex items-center justify-center text-pink-600 text-xl mb-5"
|
||
>
|
||
<i class="fas fa-users"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-dark mb-2">
|
||
Customer Loyalty
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Built-in loyalty points, gift cards, and customer
|
||
profiles. Know your best guests and reward them
|
||
automatically — no separate loyalty app required.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="feature-card bg-white rounded-2xl p-8 shadow-sm border border-gray-100"
|
||
>
|
||
<div
|
||
class="w-12 h-12 bg-teal-500/10 rounded-xl flex items-center justify-center text-teal-600 text-xl mb-5"
|
||
>
|
||
<i class="fas fa-store"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-dark mb-2">
|
||
Multi-Location
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Manage unlimited locations from one dashboard.
|
||
Centralized menus, pricing, promotions, and
|
||
consolidated reporting across your entire chain.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── How It Works ──────────────────────────────────────────────── -->
|
||
<section id="how-it-works" class="py-20">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-14">
|
||
<div
|
||
class="text-sm font-semibold tracking-widest uppercase text-brand mb-3"
|
||
>
|
||
Getting Started
|
||
</div>
|
||
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">
|
||
From Sign-Up to First Sale in Days
|
||
</h2>
|
||
<p class="text-lg text-gray-500 max-w-2xl mx-auto">
|
||
We don't just hand you software and wish you luck.
|
||
ODOO4projects and ArrowScan handle every step of your
|
||
setup together.
|
||
</p>
|
||
</div>
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
<div
|
||
class="bg-white rounded-2xl p-8 shadow-sm border border-gray-100 text-center relative"
|
||
>
|
||
<div
|
||
class="w-16 h-16 bg-dark rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg"
|
||
>
|
||
<span class="text-accent font-bold text-xl"
|
||
>01</span
|
||
>
|
||
</div>
|
||
<div
|
||
class="hidden md:block absolute top-14 -right-4 z-10 text-gray-300 text-2xl font-light"
|
||
>
|
||
›
|
||
</div>
|
||
<h3 class="text-xl font-bold text-dark mb-3">
|
||
Choose Your Setup
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Tell us your industry, venue size, and number of
|
||
locations. We'll recommend the exact configuration —
|
||
hardware from ArrowScan, software from PointOS.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="bg-white rounded-2xl p-8 shadow-sm border border-gray-100 text-center relative"
|
||
>
|
||
<div
|
||
class="w-16 h-16 bg-dark rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg"
|
||
>
|
||
<span class="text-accent font-bold text-xl"
|
||
>02</span
|
||
>
|
||
</div>
|
||
<div
|
||
class="hidden md:block absolute top-14 -right-4 z-10 text-gray-300 text-2xl font-light"
|
||
>
|
||
›
|
||
</div>
|
||
<h3 class="text-xl font-bold text-dark mb-3">
|
||
We Configure Everything
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Our team handles menus, integrations, hardware
|
||
setup, and staff accounts. You don't need an IT
|
||
department — we're yours for the entire onboarding.
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="bg-white rounded-2xl p-8 shadow-sm border border-gray-100 text-center"
|
||
>
|
||
<div
|
||
class="w-16 h-16 bg-dark rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg"
|
||
>
|
||
<span class="text-accent font-bold text-xl"
|
||
>03</span
|
||
>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-dark mb-3">
|
||
Go Live with Confidence
|
||
</h3>
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Staff training included. US-based support from
|
||
ArrowScan from day one. Most businesses are fully
|
||
operational within 3–5 business days.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── FAQ ────────────────────────────────────────────────────────── -->
|
||
<section id="faq" class="py-20 bg-gray-50">
|
||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-14">
|
||
<div
|
||
class="text-sm font-semibold tracking-widest uppercase text-brand mb-3"
|
||
>
|
||
Got Questions?
|
||
</div>
|
||
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">
|
||
Frequently Asked Questions
|
||
</h2>
|
||
<p class="text-lg text-gray-500">
|
||
Everything you need to know before you get started.
|
||
Can't find an answer?
|
||
<a
|
||
href="#trial"
|
||
class="text-brand hover:underline font-medium"
|
||
>Just ask us.</a
|
||
>
|
||
</p>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div
|
||
class="faq-item bg-white border border-gray-200 rounded-2xl overflow-hidden"
|
||
>
|
||
<button
|
||
onclick="toggleFaq(this)"
|
||
class="w-full flex items-center justify-between px-7 py-5 text-left gap-4"
|
||
>
|
||
<span class="text-sm font-semibold text-dark"
|
||
>Does PointOS work without an internet
|
||
connection?</span
|
||
>
|
||
<i
|
||
class="fas fa-plus faq-icon text-brand text-sm flex-shrink-0"
|
||
></i>
|
||
</button>
|
||
<div class="faq-answer px-7 pb-6">
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Yes — PointOS is built with offline-first
|
||
architecture. All transactions, orders, and
|
||
inventory changes are stored locally on the
|
||
device and synchronized automatically when your
|
||
connection returns. You'll never lose a sale due
|
||
to an outage.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="faq-item bg-white border border-gray-200 rounded-2xl overflow-hidden"
|
||
>
|
||
<button
|
||
onclick="toggleFaq(this)"
|
||
class="w-full flex items-center justify-between px-7 py-5 text-left gap-4"
|
||
>
|
||
<span class="text-sm font-semibold text-dark"
|
||
>What hardware do I need?</span
|
||
>
|
||
<i
|
||
class="fas fa-plus faq-icon text-brand text-sm flex-shrink-0"
|
||
></i>
|
||
</button>
|
||
<div class="faq-answer px-7 pb-6">
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
PointOS runs on any modern tablet, desktop, or
|
||
mobile device — iOS or Android. For professional
|
||
deployments, ArrowScan supplies pre-configured
|
||
terminals, receipt printers, kitchen display
|
||
systems, and self-service kiosk units. All
|
||
hardware arrives pre-installed and tested.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="faq-item bg-white border border-gray-200 rounded-2xl overflow-hidden"
|
||
>
|
||
<button
|
||
onclick="toggleFaq(this)"
|
||
class="w-full flex items-center justify-between px-7 py-5 text-left gap-4"
|
||
>
|
||
<span class="text-sm font-semibold text-dark"
|
||
>Can I manage multiple locations from one
|
||
account?</span
|
||
>
|
||
<i
|
||
class="fas fa-plus faq-icon text-brand text-sm flex-shrink-0"
|
||
></i>
|
||
</button>
|
||
<div class="faq-answer px-7 pb-6">
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Absolutely. PointOS is built for multi-site
|
||
operations. You can manage unlimited locations
|
||
from a single dashboard — with centralized
|
||
menus, pricing rules, promotions, and
|
||
consolidated reporting across your entire chain
|
||
or franchise network.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="faq-item bg-white border border-gray-200 rounded-2xl overflow-hidden"
|
||
>
|
||
<button
|
||
onclick="toggleFaq(this)"
|
||
class="w-full flex items-center justify-between px-7 py-5 text-left gap-4"
|
||
>
|
||
<span class="text-sm font-semibold text-dark"
|
||
>What payment methods are supported?</span
|
||
>
|
||
<i
|
||
class="fas fa-plus faq-icon text-brand text-sm flex-shrink-0"
|
||
></i>
|
||
</button>
|
||
<div class="faq-answer px-7 pb-6">
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
PointOS accepts cash, chip & PIN cards,
|
||
contactless NFC, Apple Pay, Google Pay, and
|
||
digital wallets. ArrowScan's certified payment
|
||
terminals handle all card processing and
|
||
integrate with all major US payment processors.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="faq-item bg-white border border-gray-200 rounded-2xl overflow-hidden"
|
||
>
|
||
<button
|
||
onclick="toggleFaq(this)"
|
||
class="w-full flex items-center justify-between px-7 py-5 text-left gap-4"
|
||
>
|
||
<span class="text-sm font-semibold text-dark"
|
||
>How long does setup take?</span
|
||
>
|
||
<i
|
||
class="fas fa-plus faq-icon text-brand text-sm flex-shrink-0"
|
||
></i>
|
||
</button>
|
||
<div class="faq-answer px-7 pb-6">
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Most single-location businesses are fully live
|
||
within 3–5 business days. Multi-site deployments
|
||
typically take 1–2 weeks. Our team handles all
|
||
configuration, menu import, staff account setup,
|
||
and initial training — so your team can focus on
|
||
running your business, not learning software.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="faq-item bg-white border border-gray-200 rounded-2xl overflow-hidden"
|
||
>
|
||
<button
|
||
onclick="toggleFaq(this)"
|
||
class="w-full flex items-center justify-between px-7 py-5 text-left gap-4"
|
||
>
|
||
<span class="text-sm font-semibold text-dark"
|
||
>Is there a free trial?</span
|
||
>
|
||
<i
|
||
class="fas fa-plus faq-icon text-brand text-sm flex-shrink-0"
|
||
></i>
|
||
</button>
|
||
<div class="faq-answer px-7 pb-6">
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Yes. We offer a full 4-week free trial — no
|
||
credit card required. Your trial runs on our
|
||
managed hosting so you get a complete,
|
||
production-grade system to evaluate.
|
||
<a
|
||
href="https://apps.odoo4projects.com/"
|
||
target="_blank"
|
||
class="text-brand hover:underline font-medium"
|
||
>Click here to start your free trial</a
|
||
>
|
||
and be up and running in minutes.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="faq-item bg-white border border-gray-200 rounded-2xl overflow-hidden"
|
||
>
|
||
<button
|
||
onclick="toggleFaq(this)"
|
||
class="w-full flex items-center justify-between px-7 py-5 text-left gap-4"
|
||
>
|
||
<span class="text-sm font-semibold text-dark"
|
||
>Who provides support?</span
|
||
>
|
||
<i
|
||
class="fas fa-plus faq-icon text-brand text-sm flex-shrink-0"
|
||
></i>
|
||
</button>
|
||
<div class="faq-answer px-7 pb-6">
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Support is handled jointly by ODOO4projects
|
||
(software & platform) and ArrowScan
|
||
(US-based hardware & on-site support). Both
|
||
teams are available via chat, email, and phone.
|
||
ArrowScan has field technicians across the US
|
||
for hardware issues that need a physical
|
||
presence.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="faq-item bg-white border border-gray-200 rounded-2xl overflow-hidden"
|
||
>
|
||
<button
|
||
onclick="toggleFaq(this)"
|
||
class="w-full flex items-center justify-between px-7 py-5 text-left gap-4"
|
||
>
|
||
<span class="text-sm font-semibold text-dark"
|
||
>Does the pricing include hardware?</span
|
||
>
|
||
<i
|
||
class="fas fa-plus faq-icon text-brand text-sm flex-shrink-0"
|
||
></i>
|
||
</button>
|
||
<div class="faq-answer px-7 pb-6">
|
||
<p class="text-gray-500 text-sm leading-relaxed">
|
||
Software and hardware are priced separately so
|
||
you only pay for what you need. PointOS software
|
||
is available as a monthly subscription per
|
||
location. ArrowScan hardware is available for
|
||
purchase or lease. Contact us for a combined
|
||
quote tailored to your venue type and size.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── Trial / CTA ────────────────────────────────────────────────── -->
|
||
<section id="trial" class="py-0 overflow-hidden">
|
||
<div class="md:flex min-h-[580px]">
|
||
<!-- Left: pitch -->
|
||
<div
|
||
class="md:w-1/2 bg-gradient-to-br from-dark via-[#2d1f3d] to-brand-dark flex flex-col justify-center px-10 py-16 md:px-16 text-white"
|
||
>
|
||
<div
|
||
class="text-xs font-bold tracking-widest uppercase text-purple-300 mb-4"
|
||
>
|
||
Ready to Transform Your Business?
|
||
</div>
|
||
<h2
|
||
class="text-3xl md:text-4xl font-bold leading-tight mb-5"
|
||
>
|
||
Try it live before<br />you spend a cent.
|
||
</h2>
|
||
<p class="text-gray-300 text-sm leading-relaxed mb-8">
|
||
Join 500+ businesses already running on PointOS. Start
|
||
your 4-week free trial on our fully managed hosting — no
|
||
setup, no credit card, no commitment.
|
||
</p>
|
||
<ul class="space-y-3 mb-8">
|
||
<li
|
||
class="flex items-center gap-3 text-sm text-gray-200"
|
||
>
|
||
<span
|
||
class="w-6 h-6 rounded-full bg-green-500/20 border border-green-400/30 flex items-center justify-center flex-shrink-0"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-400 text-[10px]"
|
||
></i>
|
||
</span>
|
||
Full POS platform active from day one
|
||
</li>
|
||
<li
|
||
class="flex items-center gap-3 text-sm text-gray-200"
|
||
>
|
||
<span
|
||
class="w-6 h-6 rounded-full bg-green-500/20 border border-green-400/30 flex items-center justify-center flex-shrink-0"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-400 text-[10px]"
|
||
></i>
|
||
</span>
|
||
Managed hosting — we handle updates & backups
|
||
</li>
|
||
<li
|
||
class="flex items-center gap-3 text-sm text-gray-200"
|
||
>
|
||
<span
|
||
class="w-6 h-6 rounded-full bg-green-500/20 border border-green-400/30 flex items-center justify-center flex-shrink-0"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-400 text-[10px]"
|
||
></i>
|
||
</span>
|
||
Real production environment, not a sandbox
|
||
</li>
|
||
<li
|
||
class="flex items-center gap-3 text-sm text-gray-200"
|
||
>
|
||
<span
|
||
class="w-6 h-6 rounded-full bg-green-500/20 border border-green-400/30 flex items-center justify-center flex-shrink-0"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-400 text-[10px]"
|
||
></i>
|
||
</span>
|
||
4 weeks free, cancel or keep — your call
|
||
</li>
|
||
<li
|
||
class="flex items-center gap-3 text-sm text-gray-200"
|
||
>
|
||
<span
|
||
class="w-6 h-6 rounded-full bg-green-500/20 border border-green-400/30 flex items-center justify-center flex-shrink-0"
|
||
>
|
||
<i
|
||
class="fas fa-check text-green-400 text-[10px]"
|
||
></i>
|
||
</span>
|
||
US-based support from ArrowScan included
|
||
</li>
|
||
</ul>
|
||
<div
|
||
class="flex flex-wrap gap-5 text-xs text-gray-400 pt-5 border-t border-white/10"
|
||
>
|
||
<span class="flex items-center gap-1.5"
|
||
><i class="fas fa-lock text-gray-500"></i> PCI-DSS
|
||
Compliant</span
|
||
>
|
||
<span class="flex items-center gap-1.5"
|
||
><i class="fas fa-server text-gray-500"></i> 99.9%
|
||
Uptime SLA</span
|
||
>
|
||
<span class="flex items-center gap-1.5"
|
||
><i class="fas fa-flag text-gray-500"></i> US-Based
|
||
Support</span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right: CTA buttons -->
|
||
<div
|
||
class="md:w-1/2 bg-white flex flex-col justify-center px-10 py-16 md:px-16"
|
||
>
|
||
<h3 class="text-2xl font-bold text-dark mb-1">
|
||
Start your free trial
|
||
</h3>
|
||
<p class="text-gray-400 text-sm mb-10">
|
||
No credit card required. Up and running in minutes.
|
||
</p>
|
||
|
||
<div class="space-y-4">
|
||
<a
|
||
href="https://apps.odoo4projects.com/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="btn-accent flex items-center justify-center gap-3 text-white px-8 py-4 rounded-xl font-semibold text-lg w-full"
|
||
>
|
||
<i class="fas fa-rocket"></i>
|
||
Start 4-Week Free Trial
|
||
</a>
|
||
|
||
<div class="relative flex items-center gap-4">
|
||
<div class="flex-1 border-t border-gray-200"></div>
|
||
<span class="text-xs text-gray-400 font-medium"
|
||
>or</span
|
||
>
|
||
<div class="flex-1 border-t border-gray-200"></div>
|
||
</div>
|
||
|
||
<a
|
||
href="mailto:hello@odoo4projects.com"
|
||
class="btn-brand flex items-center justify-center gap-3 text-white px-8 py-4 rounded-xl font-semibold text-lg w-full"
|
||
>
|
||
<i class="fas fa-calendar-alt"></i>
|
||
Schedule a Demo Call
|
||
</a>
|
||
|
||
<p
|
||
class="text-xs text-gray-400 text-center leading-relaxed pt-3"
|
||
>
|
||
By starting a trial you agree to the
|
||
<a href="#" class="text-brand hover:underline"
|
||
>Terms & Conditions</a
|
||
>
|
||
of ODOO4projects.<br />
|
||
A partnership of
|
||
<strong class="text-dark">ODOO4projects LLC</strong>
|
||
and
|
||
<strong class="text-dark">ArrowScan.com</strong>.
|
||
</p>
|
||
|
||
<div
|
||
class="grid grid-cols-3 gap-4 pt-5 border-t border-gray-100"
|
||
>
|
||
<div class="text-center">
|
||
<div class="text-xl font-bold text-dark">
|
||
500+
|
||
</div>
|
||
<div class="text-xs text-gray-400 mt-0.5">
|
||
Businesses
|
||
</div>
|
||
</div>
|
||
<div class="text-center border-x border-gray-100">
|
||
<div class="text-xl font-bold text-dark">
|
||
99.9%
|
||
</div>
|
||
<div class="text-xs text-gray-400 mt-0.5">
|
||
Uptime
|
||
</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-xl font-bold text-dark">
|
||
4 wks
|
||
</div>
|
||
<div class="text-xs text-gray-400 mt-0.5">
|
||
Free Trial
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── Footer ─────────────────────────────────────────────────────── -->
|
||
<footer class="bg-dark text-white py-16">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid md:grid-cols-4 gap-10 mb-12">
|
||
<!-- Brand -->
|
||
<div class="md:col-span-1">
|
||
<div class="mb-4">
|
||
<span class="text-2xl font-bold"
|
||
>Point<span class="text-accent">OS</span></span
|
||
>
|
||
<p class="text-xs text-gray-500 mt-1 font-medium">
|
||
by ODOO4projects × ArrowScan
|
||
</p>
|
||
</div>
|
||
<p class="text-gray-400 text-sm leading-relaxed mb-6">
|
||
Smart, scalable POS solutions combining the
|
||
reliability of enterprise software with US-based
|
||
hardware support from ArrowScan.
|
||
</p>
|
||
<div class="flex items-center gap-3">
|
||
<a
|
||
href="#"
|
||
class="w-8 h-8 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors"
|
||
>
|
||
<i
|
||
class="fab fa-linkedin-in text-gray-400 hover:text-white text-sm"
|
||
></i>
|
||
</a>
|
||
<a
|
||
href="#"
|
||
class="w-8 h-8 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors"
|
||
>
|
||
<i
|
||
class="fab fa-x-twitter text-gray-400 hover:text-white text-sm"
|
||
></i>
|
||
</a>
|
||
<a
|
||
href="#"
|
||
class="w-8 h-8 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors"
|
||
>
|
||
<i
|
||
class="fab fa-instagram text-gray-400 hover:text-white text-sm"
|
||
></i>
|
||
</a>
|
||
<a
|
||
href="#"
|
||
class="w-8 h-8 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors"
|
||
>
|
||
<i
|
||
class="fab fa-facebook-f text-gray-400 hover:text-white text-sm"
|
||
></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Solutions -->
|
||
<div>
|
||
<h4
|
||
class="text-sm font-semibold text-white uppercase tracking-wider mb-5"
|
||
>
|
||
Solutions
|
||
</h4>
|
||
<ul class="space-y-3">
|
||
<li>
|
||
<a
|
||
href="#industries"
|
||
class="text-gray-400 hover:text-white text-sm transition-colors"
|
||
>Fine Dining</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#industries"
|
||
class="text-gray-400 hover:text-white text-sm transition-colors"
|
||
>Fast & Casual</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#industries"
|
||
class="text-gray-400 hover:text-white text-sm transition-colors"
|
||
>Takeout & Delivery</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#industries"
|
||
class="text-gray-400 hover:text-white text-sm transition-colors"
|
||
>Self-Service Kiosk</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#industries"
|
||
class="text-gray-400 hover:text-white text-sm transition-colors"
|
||
>Bar & Nightlife</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Company -->
|
||
<div>
|
||
<h4
|
||
class="text-sm font-semibold text-white uppercase tracking-wider mb-5"
|
||
>
|
||
Company
|
||
</h4>
|
||
<ul class="space-y-3">
|
||
<li>
|
||
<a
|
||
href="#features"
|
||
class="text-gray-400 hover:text-white text-sm transition-colors"
|
||
>Features</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#how-it-works"
|
||
class="text-gray-400 hover:text-white text-sm transition-colors"
|
||
>How It Works</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#faq"
|
||
class="text-gray-400 hover:text-white text-sm transition-colors"
|
||
>FAQ</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://odoo4projects.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="text-gray-400 hover:text-white text-sm transition-colors"
|
||
>ODOO4projects</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://arrowscan.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="text-gray-400 hover:text-white text-sm transition-colors"
|
||
>ArrowScan.com</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Get Started -->
|
||
<div>
|
||
<h4
|
||
class="text-sm font-semibold text-white uppercase tracking-wider mb-5"
|
||
>
|
||
Get Started
|
||
</h4>
|
||
<ul class="space-y-3 mb-6">
|
||
<li>
|
||
<a
|
||
href="https://apps.odoo4projects.com/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="text-gray-400 hover:text-white text-sm transition-colors"
|
||
>Start Free Trial</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#trial"
|
||
class="text-gray-400 hover:text-white text-sm transition-colors"
|
||
>Schedule a Demo</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="text-gray-400 hover:text-white text-sm transition-colors"
|
||
>Contact Sales</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="#"
|
||
class="text-gray-400 hover:text-white text-sm transition-colors"
|
||
>Support</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
<a
|
||
href="https://apps.odoo4projects.com/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="btn-accent text-white text-sm font-semibold px-5 py-2.5 rounded-xl inline-block"
|
||
>
|
||
Free Trial <i class="fas fa-arrow-right ml-1.5"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom bar -->
|
||
<div
|
||
class="border-t border-white/10 pt-8 flex flex-col md:flex-row items-center justify-between gap-4"
|
||
>
|
||
<p class="text-gray-500 text-sm text-center md:text-left">
|
||
© 2025 PointOS — A partnership of
|
||
<a
|
||
href="https://odoo4projects.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="text-gray-300 hover:text-white transition-colors font-medium"
|
||
>ODOO4projects LLC</a
|
||
>
|
||
&
|
||
<a
|
||
href="https://arrowscan.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="text-gray-300 hover:text-white transition-colors font-medium"
|
||
>ArrowScan.com</a
|
||
>
|
||
</p>
|
||
<div class="flex items-center gap-6 text-sm text-gray-500">
|
||
<a
|
||
href="#"
|
||
class="hover:text-gray-300 transition-colors"
|
||
>Privacy Policy</a
|
||
>
|
||
<a
|
||
href="#"
|
||
class="hover:text-gray-300 transition-colors"
|
||
>Terms of Service</a
|
||
>
|
||
<a
|
||
href="#"
|
||
class="hover:text-gray-300 transition-colors"
|
||
>Legal</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// ── Mobile menu toggle ──────────────────────────────────────────
|
||
const menuBtn = document.getElementById("mobile-menu-button");
|
||
const mobileMenu = document.getElementById("mobile-menu");
|
||
menuBtn.addEventListener("click", () =>
|
||
mobileMenu.classList.toggle("hidden"),
|
||
);
|
||
mobileMenu.querySelectorAll("a").forEach((a) => {
|
||
a.addEventListener("click", () =>
|
||
mobileMenu.classList.add("hidden"),
|
||
);
|
||
});
|
||
|
||
// ── FAQ accordion ───────────────────────────────────────────────
|
||
function toggleFaq(button) {
|
||
const item = button.closest(".faq-item");
|
||
const isOpen = item.classList.contains("open");
|
||
document
|
||
.querySelectorAll(".faq-item")
|
||
.forEach((i) => i.classList.remove("open"));
|
||
if (!isOpen) item.classList.add("open");
|
||
}
|
||
|
||
// ── Smooth scroll with nav offset ───────────────────────────────
|
||
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||
anchor.addEventListener("click", function (e) {
|
||
const href = this.getAttribute("href");
|
||
if (href === "#") return;
|
||
const target = document.querySelector(href);
|
||
if (target) {
|
||
e.preventDefault();
|
||
const offset = 72;
|
||
const top =
|
||
target.getBoundingClientRect().top +
|
||
window.scrollY -
|
||
offset;
|
||
window.scrollTo({ top, behavior: "smooth" });
|
||
}
|
||
});
|
||
});
|
||
|
||
// ── Sticky nav shadow on scroll ─────────────────────────────────
|
||
const navbar = document.getElementById("navbar");
|
||
window.addEventListener(
|
||
"scroll",
|
||
() => {
|
||
if (window.scrollY > 10) {
|
||
navbar.classList.add("shadow-md");
|
||
navbar.classList.remove("shadow-sm");
|
||
} else {
|
||
navbar.classList.add("shadow-sm");
|
||
navbar.classList.remove("shadow-md");
|
||
}
|
||
},
|
||
{ passive: true },
|
||
);
|
||
</script>
|
||
</body>
|
||
</html>
|