SPORT Landing Pages
SPORT Landing consists of two pages: one for players looking for courts and partners, and one for court owners who want to publish their arenas and earn more.
Overview
The SPORT landing is a public-facing website that introduces the platform to two distinct audiences. Each audience has its own dedicated page with tailored messaging, features, and calls to action.
Architecture
The landing is built with Next.js 15 App Router, React 19, Bootstrap 5 + Sass, and AOS (Animate On Scroll) animations.
Both pages share common elements:
| Element | Description |
|---|---|
| Header | Fixed header with navigation, scroll spy, and smooth scrolling |
| Footer | Shared footer with logo, copyright, app version, and links (License, Documentation, Support) |
| Navigation | Automatically switches menu items based on the current page |
| Animations | AOS (Animate On Scroll) effects applied to all sections |
The header stays fixed at the top of the page. When the user scrolls, it transitions with a background change and padding adjustment for a polished feel.
Player Landing
URL: /
Audience: Players looking for a sports court or a partner for a game.
Navigation
The player landing has 6 navigation items: Home, How It Works, Courts, Features, Testimonials, and FAQ. Clicking any item smoothly scrolls to the corresponding section, and the active section is highlighted in the menu as the user scrolls.
Page Sections
Hero
The main banner with the headline and a court search form. Users can filter by court type, district, and time. Includes app download buttons and a link to the business landing for court owners.
How It Works
Step 1
Sign Up — Create your player profile with your preferred sports, skill level, and availability.
Courts
Court selection section with indoor and outdoor options and different surface types.
Features
Six core capabilities of the platform:
| Feature | Description |
|---|---|
| Instant Booking | Reserve a court in seconds |
| Partner Search | Find players matched by skill level |
| Rating System | Every player has a rating, stats, and awards |
| Tournaments | Organize and join competitive events |
| Coaches | Find coaches, publish lessons, search for students |
| Slot Resale | Can’t make it? Resell your slot to other players and keep your money |
Banners
Two featured banners highlighting partner search and slot resale functionality.
Statistics
Key numbers about the platform:
| Metric | Value |
|---|---|
| Courts | 150+ |
| Players | 10,000+ |
| Matches played | 50,000+ |
Partners
A slider showcasing partner logos.
Testimonials
Real player reviews about their experience with the platform.
FAQ
Frequently asked questions with an option to contact support via Telegram.
How do I book a court?
Search for a court by type, location, and available time. Select a slot, confirm the booking, and receive instant confirmation with all details.
How do I find a playing partner?
All registered players have profiles with skill levels, game statistics, and ratings. Browse players in your area and send a match request.
Can I cancel or reschedule?
If you can’t make it, you can resell your slot to another player through the platform, keeping your money instead of losing it.
How does the rating system work?
Every player earns a rating based on match results, game history, and awards. This helps you find partners at a similar skill level.
How do tournaments work?
Anyone can organize a tournament — set the level, entry fee, number of participants, and dates. Players can browse and join tournaments that match their level.
How do coaching sessions work?
Coaches can create and publish lessons. Students can search for coaches by sport, skill level, and location.
There are no pricing plans on the player landing. The application is free for players. Revenue comes from court owners through business subscriptions.
Business Landing
URL: /business
Audience: Owners of tennis courts and sports arenas who want to publish their facilities and earn more.
Navigation
The business landing has 9 navigation items: Home, How It Works, Features, Advantages, Pricing, App, Testimonials, FAQ, and Contacts.
Page Sections
Hero
The main banner with the headline “Publish your court and earn more.” Includes a link back to the player landing.
Statistics
Key numbers for court owners:
| Metric | Value |
|---|---|
| Arena owners | 50+ |
| Bookings per month | 5,000+ |
| Revenue growth | 30%+ |
How It Works
Step 1
Add Your Court — Register your arena with photos, amenities, and location details.
Features
Six business capabilities:
| Feature | Description |
|---|---|
| Court Management | Manage all your arenas from one dashboard |
| Flexible Scheduling | Set up time slots with full control |
| Price Management | Dynamic pricing based on time, day, and demand |
| Analytics | Detailed booking statistics and revenue reports |
| Auto-Confirmation | Automatic booking confirmation for players |
| POS Integration | Connect with your existing point-of-sale system |
Advantages
Three key benefits: more clients, no empty slots, and full automation.
Pricing
Three subscription plans for court owners:
| Plan | Price | Best For |
|---|---|---|
| Start | 1,990 RUB/mo | Small arenas getting started |
| Business | 4,990 RUB/mo | Growing arenas with multiple courts |
| Premium | 9,990 RUB/mo | Large complexes with full feature set |
Each plan tier includes increasing levels of court management features, analytics depth, and support priority.
Additional Sections
- Testimonials — Reviews from court owners about their experience
- FAQ — Six frequently asked questions tailored for arena owners
- Call to Action — “Connect your court and start earning” with two buttons: “Ask a question” (scrolls to FAQ) and “Connect court” (scrolls to Pricing)
Cross-Navigation
Both landing pages link to each other:
| From | To | Link |
|---|---|---|
| Player landing (/) | Business landing | ”For court owners” button in the Hero section |
| Business landing (/business) | Player landing | ”For players” button in the Hero section |
The navigation menu automatically switches its items based on the current page path, so players and court owners each see only the sections relevant to them.
User Experience Features
Scroll Spy
Active section highlighting
As the user scrolls through the page, the corresponding navigation item is automatically highlighted. This uses a scroll listener with a 100px offset for accurate detection.
Testing
The landing pages are covered by E2E tests (Playwright):
| Test | What It Verifies |
|---|---|
| Homepage heading | The player landing renders correctly with the expected heading |
| Business heading | The business landing at /business renders with the expected heading |
| Scroll spy | Clicking a navigation item (e.g., FAQ) highlights the correct menu item |
| Cross-links | Links between the player and business landings work correctly |
| Fixed header | The header receives the correct CSS class when the user scrolls down |