Home
Relevant source files
The following files were used as context for generating this wiki page:
The Home page is the main public-facing landing page for the QashierWise application. It serves as the primary marketing and user acquisition portal, designed to introduce the platform's features to potential customers (restaurant owners) and guide them towards registration or viewing a demo. The page is built using Laravel Blade and is heavily optimized for performance and SEO.
The core purpose of the page is to articulate the value proposition of QashierWise: an AI-powered WhatsApp Chatbot integrated with a Point of Sale (POS) system, designed specifically for restaurants to manage reservations, orders, and payments.
Sources: resources/views/welcome.blade.php, README.md
Key Components and Technologies
The Home page is a statically-rendered view that leverages a modern frontend stack loaded primarily via CDNs. This approach prioritizes fast initial load times for unauthenticated users.
| Technology | Purpose | Source |
|---|---|---|
| Laravel Blade | Server-side HTML templating engine. | resources/views/welcome.blade.php |
| Tailwind CSS | Utility-first CSS framework for styling, loaded from a CDN. | resources/views/welcome.blade.php:151-165 |
| Alpine.js | Minimalist JavaScript framework for client-side interactivity (e.g., mobile menu, pricing logic). | resources/views/welcome.blade.php:171 |
| Font Awesome | Icon library for UI elements. | resources/views/welcome.blade.php:168 |
Sources: resources/views/welcome.blade.php, resources/views/layouts/app.blade.php
Page Structure and Content
The welcome.blade.php file defines the structure of the landing page, which is composed of several distinct marketing sections.
Sources: resources/views/welcome.blade.php
Navigation
The navigation bar is responsive, providing a full menu on desktop and a hamburger-style menu on mobile, managed by Alpine.js (x-data="{ menuOpen: false }"). It contains anchor links to different sections of the page and conditional Call-to-Action (CTA) buttons based on the user's authentication status.
Navigation Links:
- Cara Kerja (
#features) - Fitur (
#fitur) - Harga (
#pricing) - Tentang Kami (
#about) - FAQ (
#faq)
Conditional CTAs:
- Guest Users: "Lihat Demo" and "Coba Gratis 14 Hari" buttons, which link to
/login. - Authenticated Users: A "Dashboard" link that directs to the
/dashboardpage.
This conditional rendering is handled by Laravel's @auth Blade directive.
@if (Route::has('login'))
@auth
<a href="{{ url('/dashboard') }}" ...>Dashboard</a>
@else
<a href="/login" ...>Lihat Demo</a>
<a href="/login" ...>Coba Gratis 14 Hari</a>
@endauth
@endif
Sources: resources/views/welcome.blade.php:480-493
Hero Section
The hero section immediately communicates the product's core benefit: "Respon lebih cepat, jual lebih banyak" (Respond faster, sell more). It highlights that the platform is an AI-powered WhatsApp chatbot with QRIS integration, targeting the restaurant industry.
Sources: resources/views/welcome.blade.php:522-545
Feature Sections
The page details the product's functionality in two key sections:
- How It Works (
#features): A four-step visual guide explaining the user flow from receiving a WhatsApp chat to managing it in the console. - Main Features (
#fitur): A grid highlighting six core features:- AI Chatbot WhatsApp
- Console Satu Layar (Single-Screen Console)
- Order Delivery & Pickup
- Reservasi Pintar (Smart Reservations)
- Pembayaran QRIS (QRIS Payments)
- Laporan & CRM (Reports & CRM)
Sources: resources/views/welcome.blade.php:622-649, 652-715
Pricing Section
This section presents three subscription tiers: Basic (Free), Standard, and Pro. It is managed by an Alpine.js component (pricingSection()) that handles dynamic interactions, including fetching the user's current subscription status and initiating the checkout process.
| Plan | Price (IDR) | Key Features |
|---|---|---|
| Basic | 0 | 1 outlet, AI chatbot dasar, Reservasi & pickup |
| Standard | 249,000 /bln | Up to 2 outlets, Delivery, Unlimited QRIS |
| Pro | 2,990,000 /bln | Unlimited team, Analytics & API, Multi-outlet |
Sources: resources/views/welcome.blade.php:798-989
The checkout process for paid plans is initiated by calling the /api/subscription/checkout endpoint, which is expected to return a checkout URL (e.g., from a payment provider like Polar.sh).
This diagram illustrates the checkout flow initiated from the pricing section.
Footer
The footer provides standard navigation, legal links, and company contact information. It includes links to the Privacy Policy and Terms of Service pages.
Sources: resources/views/welcome.blade.php:1176-1239, resources/views/privacy-policy.blade.php, resources/views/terms-of-service.blade.php
SEO and Metadata
The Home page is heavily optimized for search engines through a combination of meta tags, structured data, and a well-defined robots.txt file.
Meta Tags & Structured Data
The <head> section of welcome.blade.php is populated with extensive metadata:
- Primary Tags:
title,description,keywords,author, andcanonicalURL. - Open Graph (Facebook):
og:type,og:url,og:title,og:description,og:image, etc. - Twitter Cards:
twitter:card,twitter:title,twitter:description, etc. - JSON-LD Structured Data: The page includes multiple
application/ld+jsonscripts to provide rich data to search engines.
The following schemas are used:
Organization: Describes the QashierWise company.SoftwareApplication: Details the QashierWise software, its category, and features.WebSite: Defines the site for search functionality.FAQPage: Marks up the Frequently Asked Questions section.BreadcrumbList: Defines the page's position in the site hierarchy.Product: Describes the "Standard" plan, including pricing, reviews, and ratings.
Sources: resources/views/welcome.blade.php:5-399
Crawling and Indexing
The public/robots.txt file instructs web crawlers on which parts of the site to avoid.
- Disallowed Paths:
/dashboard/*/admin/*/login,/register/api/*(with some exceptions)/sanctum/*
- Allowed Paths:
/(Home page)/api/products/api/categories
This configuration ensures that public-facing content is indexed while protecting authenticated routes and sensitive API endpoints. The file also points to the site's sitemap.
Sources: public/robots.txt
Asset Management and Performance
The application employs several strategies to ensure a fast loading experience for the Home page.
- Preconnect and Prefetch: It uses
<link rel="preconnect">and<link rel="dns-prefetch">to establish early connections to critical third-party origins like Google Fonts and CDNs. - Critical CSS: A block of critical CSS is inlined directly in the
<head>to ensure the above-the-fold content renders immediately, improving the First Contentful Paint (FCP) metric. - Deferred Loading: Non-critical assets are loaded asynchronously or deferred:
- The main Tailwind CSS script is loaded asynchronously via JavaScript.
- Font Awesome CSS is preloaded but applied non-blockingly using
onload. - Alpine.js is loaded with the
deferattribute.
This diagram shows the asset loading flow for the home page.
Authentication and Routing
The Home page dynamically changes its CTA buttons based on the user's authentication state using Laravel's @auth directive.
- Guests are directed to
/loginor/register. - Authenticated users are directed to
/dashboard, which is the main application interface rendered bydashboard/index.blade.php.
This ensures a seamless transition from the public marketing site to the private application dashboard for returning users.
Sources: resources/views/welcome.blade.php:480-493, resources/views/dashboard/index.blade.php