What This Screen Does

This is the public landing page of the platform. Think of it as the front door to your product — it is the first thing visitors see before they sign in or sign up. The page showcases the key features, design capabilities, pricing plans, and call-to-action sections to help new visitors understand what the platform offers and encourage them to get started.

How to Get There

Open your browser.
Navigate to the root URL of the application (e.g. https://yourdomain.com/).
You are now on the Home page.

Note: This page is publicly accessible. You do not need to be logged in to view it.

Step-by-Step Guide

The Home page is a single scrolling page made up of several sections. There are no forms to fill in — the page is designed for reading and exploring. Here is what you will find as you scroll down.

1. Scroll Progress Indicator

A thin progress bar appears at the very top of the screen.
As you scroll down the page, the bar fills up to show how far you have read.
This is purely visual — you do not need to interact with it.

2. Hero Section

This is the large banner at the top of the page.
It displays:
- A headline introducing the platform (“Start a New Project with Minimal”).
- A short description of what the platform is built on (MUI).
- A star rating showing community reviews (4.96/5).
- A Live Preview button that takes you to the dashboard.
- A Design Preview button that opens the design files in a new tab.
- A Get Free Version link for downloading the free edition.
- Icons showing available platforms (Figma, JavaScript, TypeScript, Next.js, Vite).
On desktop, animated screenshot slides appear on the right side.
As you scroll past the hero, it fades out smoothly.

Element	Action
Live Preview button	Opens the dashboard in the same tab.
Design Preview button	Opens the design file in a new browser tab.
Get Free Version link	Opens the free version download page in a new tab.

3. Minimal UI Features (What Minimal Helps You)

Three feature cards are displayed side by side (stacked on mobile):
- Branding — Explains consistent design for easy branding.
- UI & UX Design — Describes the atomic design system and customization.
- Development — Highlights ease of customization to save time and money.
Each card has an icon, a title, and a short description.
These cards are for information only — no interaction is needed.

4. Huge Pack of Elements

This section showcases the UI component library included with the platform.
You will see live, interactive examples of:
- Buttons (Add To Cart, Upload)
- A search floating action button
- A loading spinner
- Tabs (Angular, React, Vue)
- Toggle buttons (chat, mail, bell)
- Chips, avatars, avatar groups
- A star rating you can change
- A slider you can drag
- A success alert
- Switches, radio buttons, checkboxes (desktop only)
- A sample social media card, text field, select dropdown, and textarea (desktop only)
A View All Components button links to the full components showcase page.

Element	Action
Tabs (Angular / React / Vue)	Click a tab to switch the active selection.
Toggle buttons (chat / mail / bell)	Click to toggle between options. Bell is disabled.
Star rating	Click a star to change the rating value.
Slider	Drag the handle to change the value.
View All Components button	Opens the full components page in a new tab.

5. For Designer Section

A promotional section targeting designers.
Displays the heading “Professional Kit” and “For Designer”.
On desktop, a background image appears on the right side.
A Figma Workspace button links to the Figma design files.

Element	Action
Figma Workspace button	Opens the Figma workspace in a new browser tab.

6. Dark Mode Toggle

This section demonstrates the platform’s dark mode feature.
A heading reads “Dark mode” with the description “A dark theme that feels easier on the eyes.”
A toggle switch lets you switch between light mode and dark mode right on this page.
When you flip the switch, the entire page theme changes immediately.
A preview image shows what the dashboard looks like in dark mode.

Element	Action
Dark/Light toggle switch	Flips the entire page between dark and light themes.

7. Color Presets

This section lets you preview different color themes for the platform.
Six colored circles are displayed in a cluster.
Click any circle to change the primary color of the page.
The preview images below update to show how the dashboard looks with the selected color.

Element	Action
Color circles (6 options)	Click a circle to apply that color preset to the page.

8. Clean Interfaces Gallery

A showcase of ten layered screenshots demonstrating the platform’s clean UI design.
The heading reads “Beautiful, modern and clean user interfaces.”
The images animate in as you scroll into view.
This section is for viewing only — no interaction required.

9. Pricing Plans

Displays three pricing tiers side by side (or as tabs on mobile):
- Standard — Basic license with core features.
- Standard Plus — Mid-tier with additional features.
- Extended — Full-featured license with all options.
Each plan card shows:
- The license name.
- Platform icons included.
- A list of common features (checked items).
- A list of tier-specific features (checked or crossed out depending on the plan).
- A Learn more link.
On mobile, use the tabs at the top to switch between plans.
Below the plans, a “Still have questions?” section includes a Contact us button.

Element	Action
Plan tabs (mobile only)	Tap a tab to view that pricing tier.
Learn more link	Opens detailed plan information in a new tab.
Contact us button	Opens your email client with a pre-filled support email.

10. Looking For a Landing Page Template?

A promotional section showing a preview of the “Zone” landing page template.
Includes a Visit Zone Landing Page button.

Element	Action
Visit Zone Landing Page button	Opens the Zone template page in a new browser tab.

11. Get Started Advertisement

The final call-to-action section at the bottom of the page.
Features an animated rocket image and the message “Get started with Minimal kit today.”
This section is for viewing only — no buttons or links.

What Happens Behind the Scenes

Visitor opens the root URL (/)
        |
        v
React renders HomeView component
        |
        v
Scroll progress tracker attaches to the page
        |
        v
Hero section loads with animated slides and parallax fade effect
        |
        v
Each section loads with scroll-triggered animations (Framer Motion)
        |
        v
Interactive elements (dark mode toggle, color presets, slider, rating, tabs)
update local component state — no API calls are made
        |
        v
"Live Preview" button navigates to the dashboard (/dashboard)
        |
        v
External links (Figma, Zone, Contact) open in new tabs or email client

Troubleshooting

“The page is blank or only shows a white screen”

This usually means the JavaScript bundle failed to load. Check your internet connection and try refreshing the page.
If you are a developer, open the browser console (F12) and look for errors. A common cause is a missing environment variable or build failure.

“The animations are choppy or slow”

Scroll animations use Framer Motion and can be demanding on older devices.
Try closing other browser tabs to free up memory.
On very old hardware, animations may not run smoothly — this does not affect functionality.

“The dark mode toggle does not change anything”

The toggle updates the theme setting stored in your browser. If it seems stuck, try clearing your browser’s local storage for the site and refreshing.
Make sure JavaScript is enabled in your browser — the toggle relies on it.

“I clicked Live Preview but nothing happened”

The Live Preview button navigates to the dashboard route (/dashboard). If you are not logged in and the dashboard requires authentication, you may be redirected to a login page.
Check that your application routing is configured correctly if you are a developer.

“The color preset circles do not respond to clicks”

Each circle is a clickable button that updates the theme color. If clicks are not registering, try refreshing the page.
On touch devices, make sure you are tapping directly on the colored circle — they are small (24px).

“Images are not loading or showing broken icons”

The page loads images from the /assets/images/home/ folder. If images are missing, the asset files may not have been deployed correctly.
Check your network tab in developer tools (F12) to see if image requests are returning 404 errors.
If you are running locally, make sure the public/assets folder is intact.

“The pricing plans show as tabs but I want to see them side by side”

On screens smaller than the medium breakpoint (below 900px), pricing plans are displayed as tabs to save space. This is by design.
To see all three plans side by side, view the page on a desktop or widen your browser window.

“The Contact us button does not open my email”

The button uses a mailto: link. If no email client is configured on your device, nothing will happen.
You can copy the support email address (support@minimals.cc) and paste it into your preferred email service manually.

“The page takes a long time to load”

The Home page includes several large images (hero slides, preview screenshots, rocket animation). On slow connections, these may take time to load.
Once loaded, images are cached by your browser and will load faster on subsequent visits.
If you are a developer, consider enabling image optimization or lazy loading for production builds.

Event Details

Gym Details

Article Details (Home)