Landing Page & Customization
Deprixa Plus includes a fully customizable public landing page that serves as the front door of your logistics business. Every text, image, color, and section can be edited from the admin panel — no code required.
Overview
The landing page is the public-facing website of your Deprixa Plus installation. It is accessible at your root domain (e.g., https://yourdomain.com) and is fully independent of the admin panel. Visitors can:
- Learn about your logistics services and pricing
- Track shipments directly from the landing page
- Calculate estimated shipping rates
- Register as a new customer or log in to their account
- Contact your company through the footer or CTA sections
The landing page loads its content from your database settings, so every change you make in the admin panel is reflected instantly — no redeployment needed.
Page Sections
The landing page is composed of modular sections. Each section can be enabled, disabled, and reordered from the admin panel.
| Section | Purpose | Editable Elements |
|---|---|---|
| Hero | Main banner with headline, subtitle, and call-to-action buttons | Title, subtitle, badge text, gradient colors, 2 CTA buttons (text + URL), hero image, 6 statistics counters |
| About | Company introduction with image and key stats | Title, subtitle, image, dynamic stats list, bullet points |
| Services | Showcase your logistics services | Title, subtitle, unlimited service cards (each with icon, title, description, image) |
| How It Works | Step-by-step process flow | Title, subtitle, unlimited steps (each with icon, title, description) |
| Tracking | Public shipment tracking form | Title, subtitle, input placeholder text |
| Rate Calculator | Public shipping rate estimator | Title, subtitle, CTA text and link |
| Business | Business registration CTA | Title, subtitle, plan link, registration link and text |
| Customers | Customer login/registration area | Title, subtitle, create account link, login link |
| Features | Highlight platform capabilities | Title, subtitle, 2 feature blocks (each with title, description, image) |
| Testimonials | Customer reviews carousel | Title, subtitle, unlimited testimonials (name, role, text, rating, avatar) |
| FAQ | Frequently asked questions accordion | Title, subtitle, unlimited Q&A items |
| CTA | Final call-to-action banner | Title, subtitle, button text and URL |
| Footer | Company info and social links | Company name, description, email, phone, address, 4 social media links (Facebook, Twitter/X, Instagram, LinkedIn) |
Admin Panel
To customize the landing page, navigate to Settings → Landing Page in the admin panel. The editor is organized in tabs, one for each section of the page.
How to Edit
- Go to Settings → Landing Page from the main navigation.
- Select the tab for the section you want to edit (Hero, About, Services, etc.).
- Modify the text fields, upload new images, or adjust settings.
- Click Save at the bottom of the tab.
- Open your public landing page to see the changes live immediately.
General Settings
In the General tab you can:
- Enable/Disable the landing page entirely. When disabled, visitors are redirected to the login page.
- Show/Hide Sections: Toggle the visibility of each individual section.
- Reorder Sections: Drag and drop sections to change their display order.
Design Tab
The Design tab gives you global visual control over the landing page:
| Setting | Description |
|---|---|
| Hero Background Color | Main gradient color for the hero banner |
| Hero Text Color | Text color for the hero section |
| Section Background (Light) | Background color for light-themed sections |
| Section Background (Dark) | Background color for dark-themed sections |
| Accent Color | Color used for buttons, links, and highlights |
| Text Color | Default text color across the page |
| Font Family | Primary font loaded from Google Fonts |
| Heading Font | Font used for headings (h1, h2, h3) |
| Font Sizes | Base font size and heading scale |
| Button Style | Rounded, pill, or square button corners |
| Card Style | Visual treatment for service and feature cards |
| Section Spacing | Vertical padding between sections |
#FF6B35) for precise brand color matching.
Image Management
You can upload custom images for the Hero, About, Services, Features, and Testimonials sections.
- Supported formats: JPG, JPEG, PNG, WebP, SVG
- Maximum file size: 5 MB per image
- Recommendation: Use images optimized for web (compressed, max 1200px wide) for best loading performance
To upload an image, click the image placeholder or the upload button within the corresponding section tab. The uploaded image URL is automatically saved and displayed on the landing page.
Tracking & Rate Calculator
Two interactive sections allow visitors to engage with your system directly from the landing page:
Tracking Section
Visitors can enter a tracking number and be redirected to the full tracking page. This gives your customers instant access to shipment status without logging in.
Rate Calculator Section
The rate calculator allows visitors to estimate shipping costs based on origin, destination, weight, and dimensions. It links to the full public rate calculator page where calculations are performed in real time using your configured rate cards.
Animations
The landing page includes smooth scroll-reveal animations that bring sections into view as the visitor scrolls down. These animations are:
- Toggleable: Enable or disable all animations from the General settings tab.
- Performance-optimized: Using CSS transitions with IntersectionObserver for smooth, GPU-accelerated effects.
- Non-blocking: Content is fully accessible even if JavaScript is disabled or animations are turned off.
Multilingual Support
All landing page labels and default texts are available in English and Spanish. The system automatically detects the visitor's browser language and displays the appropriate version.
Custom content you enter in the admin panel (titles, descriptions, testimonials, FAQ) is saved as-is. If you need to serve multiple languages, enter the content in your primary language.
Best Practices
- Update contact info first: Replace the default placeholder email and phone with your real company details before going live.
- Keep images lightweight: Compress images to under 300 KB each for fast page loads.
- Write clear CTAs: Use action-oriented language like "Get a Quote" or "Track Your Shipment" for buttons.
- Review on mobile: Always check how your landing page looks on a phone after making changes.
- Add testimonials: Real customer reviews build trust — include a name, role, and star rating for credibility.
- Use your brand colors: Set the accent color and hero gradient to match your company branding for a professional look.