Landing Page and Client Login
Overview
The landing/login page is the public entry point for MicDots. It combines marketing content with authentication.
Public Access: No login required to view this page. Anyone can visit and read about MicDots AI-powered features.
Page Purpose
- Showcase MicDots AI-powered text-to-speech features and build trust
- Provide authentication for creating AI-generated audio requests
- Inform visitors about the voice generation platform
- Enable quick sign-in for request submission
Access Levels:
- 🌐 View Landing Page: Public (no authentication)
- 🔒 Submit Request: Login required (after authentication, redirect to Request Order Form)
Only Voice Gallery voices are managed in the backoffice. Landing page content (text, headlines, testimonials) is hardcoded and requires frontend changes to update. See Content Management section for details.
🎨 Live Preview (Design/UI)
Welcome to MicDots
Your AI-Powered Text-to-Speech Platform
Transform Text into Natural AI Speech
MicDots leverages cutting-edge AI technology to convert your written content into high-quality, natural-sounding AI-generated speech. Perfect for businesses, content creators, and accessibility needs.
Voice Models
Choose from 8 professional voice models with different tones and characteristics
Easy Sharing
Generate QR codes and shareable links for instant AI audio distribution
Custom Audio Upload
Upload your own audio files and manage them through our platform
Secure & Private
Your AI-generated content is stored securely with enterprise-grade protection
🎧 Listen to a Sample
Hear the quality of our voice models
Sample: "Welcome to MicDots! Scan the QR code to hear your personalized message."
Trusted by Organizations
MicDots is used by educational institutions, content creators, and businesses worldwide to create accessible and engaging audio content.
Client Portal
Sign in to access your account
Need Help?
If you need access or having problems logging in:
Please contact support
Choose from 8 Professional Voice Models
Select the perfect voice for your content
Perfect for Every Industry
Discover how businesses use MicDots to enhance customer experience
Restaurants & Cafes
Add audio descriptions to menu items. Customers scan QR codes to hear chef recommendations, ingredient details, and preparation stories.
"Hear our sommelier describe this week's wine selection..."
Museums & Galleries
Create self-guided audio tours. Visitors scan plaques next to exhibits to learn history, context, and artist insights without downloading apps.
"This painting was created in 1887 during Van Gogh's..."
Retail & E-commerce
Add product demos and instructions. Place QR codes on packaging so customers hear setup guides, tips, and feature highlights.
"To activate this smart device, first download the app from..."
Real Estate
Property details on yard signs. Potential buyers scan to hear listing highlights, neighborhood info, and agent contact details instantly.
"Welcome to 123 Oak Street. This 4-bedroom home features..."
Events & Conferences
Session info and speaker bios. Attendees scan schedules to hear talk summaries, speaker introductions, and room directions.
"Join us in Room B for 'AI in Healthcare' with Dr. Smith..."
Business Cards
Personal introductions. Add QR codes to cards so contacts hear your elevator pitch, services offered, and how you can help them.
"Hi, I'm Sarah. I help startups build scalable web applications..."
Trusted by Organizations Worldwide
See what our clients say about MicDots
MicDots transformed our museum experience. Visitors love scanning QR codes to hear exhibit stories. Setup took minutes, not months.
We added audio QR codes to our menu and saw a 40% increase in premium dish orders. Customers love hearing the chef describe specials.
Perfect for real estate! I generate custom property descriptions for every listing. Buyers get instant info without calling me first.
API Endpoints
This page uses the following API endpoints:
Client Login
Endpoint: POST /login
Description: Authenticates users and returns access tokens.
Role Required: client role for accessing request submission features
Voice Gallery
Endpoint: GET /api/v1/voice-gallery
Description: Retrieves the list of available voice models for the voice showcase section.
Query Parameters:
- size: number, optional. Items per page. Default value is 10, maximum value is 100.
- isPublished: boolean, optional. Filter by published status. Default value is true.
Response: Returns list of published voice models with samples, characteristics, and metadata. Results are automatically ordered by the backend.
🎨 Page Elements (Design/UI)
Marketing Content
Header Section
- MicDots logo with checkmark icon
- "Welcome to MicDots" headline
- "Your AI-Powered Text-to-Speech Platform" subtitle
Feature List
- Voice Models - 8 professional voice models
- Easy Sharing - QR codes and shareable links for AI audio
- Secure & Private - Enterprise-grade protection for AI-generated content
Audio Sample Player
- "Listen to a Sample" heading with headphone emoji
- Audio player with controls: play, pause, volume, progress
- Sample text description below player
- Dark card design matching site theme
Login Form
Client Portal Card
- "Client Portal" heading
- "Sign in to access your account" subtitle
Demo Accounts Banner
- Highlighted box with demo credentials
- Email: client01@micdots.com or client02@micdots.com
- Password: Mic1234!
Form Fields
- Email input with placeholder
- Password input with hidden characters
- "Sign in" button (full width, primary blue)
Help Section
- Highlighted info box
- "Need Help?" heading
- Message: "If you need access or having problems logging in, please contact support"
- Clear call-to-action link
- Important: No self-service password reset or registration
Testimonials Section
Section Header
- "Trusted by Organizations Worldwide" headline
- "See what our clients say about MicDots" subtitle
Testimonial Cards (3 total)
-
Museum Testimonial
- Quote: "MicDots transformed our museum experience. Visitors love scanning QR codes to hear exhibit stories. Setup took minutes, not months."
- Name: Sarah Chen
- Title: Director, City Art Museum
-
Restaurant Testimonial
- Quote: "We added audio QR codes to our menu and saw a 40% increase in premium dish orders. Customers love hearing the chef describe specials."
- Name: Marco Rossi
- Title: Owner, La Cucina Italiana
-
Real Estate Testimonial
- Quote: "Perfect for real estate! I generate custom property descriptions for every listing. Buyers get instant info without calling me first."
- Name: David Miller
- Title: Real Estate Agent, Miller Realty
Trust Indicators
- 500+ Active Organizations
- 50K+ QR Codes Generated
- 98% Customer Satisfaction
📝 Headline Suggestions (Marketing Content)
Different headline options for the landing page to test messaging and conversion. All headlines emphasize AI-powered technology:
Option 1: Benefit-Focused
Headline: "Turn Text Into Voice-Enabled QR Codes in Seconds" Subheadline: "AI-powered text-to-speech with instant QR code generation. Perfect for restaurants, museums, retail, and events."
Option 2: Problem-Solution
Headline: "Make Your Content Accessible with Voice" Subheadline: "Transform any text into natural-sounding AI audio. Share with QR codes that anyone can scan and listen."
Option 3: Use Case-Driven
Headline: "AI Audio QR Codes for Modern Businesses" Subheadline: "Menu descriptions, product info, exhibit guides, and more. Generate professional voice content instantly."
Option 4: Technology-Focused
Headline: "Professional Voice Generation Made Simple" Subheadline: "ElevenLabs-powered text-to-speech with automatic QR code creation and cloud hosting."
Option 5: Value Proposition
Headline: "Create, Share, and Track Audio QR Codes" Subheadline: "Generate natural-sounding audio from text. Download QR codes. Share anywhere. Monitor engagement."
Recommendation: Start with Option 1 (Benefit-Focused) for clearest value proposition, test others via A/B testing.
🎨 Voice Model Showcase (Design/UI)
Display voice model options in an engaging, scannable format on the landing page:
Voice Grid Layout
The voice grid with audio players is shown in the Live Preview section at the top of this page.
Voice Cards Include:
- Audio player (replaced emoji avatars) - listen to voice samples
- Voice name (Rachel, Adam, Daniel, etc.)
- Gender and accent (Female or Male, American or British)
- Personality descriptors (Professional, Warm, Sophisticated, etc.)
Implementation Details:
- 8 voice cards in responsive grid layout
- Flexible CSS grid columns with auto-fit and minimum 250px width
- Audio players with controls: play, pause, volume, progress
- Dark theme styling matching landing page design
- Each voice has unique sample audio file
Layout Suggestions:
- Card Grid with Audio Players: Shows all 8 voices with playable samples (current implementation)
- Dropdown with Audio Samples: Alternative - play 3-second preview before selecting
- Filter by Gender or Accent: Quick navigation for user preferences
- Most Popular Badge: Highlight top 2-3 voices based on usage
📝 Use Cases Section (Marketing Content)
Showcase real-world applications to help visitors understand MicDots AI-powered value:
Perfect for Every Industry
Discover how businesses use MicDots to enhance customer experience
Restaurants & Cafes
Add audio descriptions to menu items. Customers scan QR codes to hear chef recommendations, ingredient details, and preparation stories.
"Hear our sommelier describe this week's wine selection..."
Museums & Galleries
Create self-guided audio tours. Visitors scan plaques next to exhibits to learn history, context, and artist insights without downloading apps.
"This painting was created in 1887 during Van Gogh's..."
Retail & E-commerce
Add product demos and instructions. Place QR codes on packaging so customers hear setup guides, tips, and feature highlights.
"To activate this smart device, first download the app from..."
Real Estate
Property details on yard signs. Potential buyers scan to hear listing highlights, neighborhood info, and agent contact details instantly.
"Welcome to 123 Oak Street. This 4-bedroom home features..."
Events & Conferences
Session info and speaker bios. Attendees scan schedules to hear talk summaries, speaker introductions, and room directions.
"Join us in Room B for 'AI in Healthcare' with Dr. Smith..."
Business Cards
Personal introductions. Add QR codes to cards so contacts hear your elevator pitch, services offered, and how you can help them.
"Hi, I'm Sarah. I help startups build scalable web applications..."
Additional Use Cases:
- Education: Homework instructions, lesson recaps
- Healthcare: Medication instructions, appointment reminders
- Tourism: Walking tour guides, historical site information
- Manufacturing: Equipment manuals, safety procedures
- Accessibility: Make printed content accessible to visually impaired users
📝 Testimonials Section (Marketing Content)
Social proof to build trust and credibility for AI-powered voice generation:
Trusted by Organizations Worldwide
See what our clients say about MicDots
MicDots transformed our museum experience. Visitors love scanning QR codes to hear exhibit stories. Setup took minutes, not months.
We added audio QR codes to our menu and saw a 40% increase in premium dish orders. Customers love hearing the chef describe specials.
Perfect for real estate! I generate custom property descriptions for every listing. Buyers get instant info without calling me first.
Testimonial Best Practices:
- Real Names & Titles: Adds credibility (get permission first)
- Specific Results: "40% increase" is better than "great results"
- Diverse Industries: Show wide applicability
- Photos: Real headshots perform better than avatars
- Video Option: Record 30-second video testimonials for authenticity
- Rotation: Update quarterly with new success stories
User Actions
Guest/Anonymous Users (No Login)
Can access without authentication:
- View Landing Page - Read marketing content and features
- Browse Information - Understand MicDots value proposition
- See Demo Accounts - View example credentials
- Scan QR Codes - Access public audio playback pages
- Leave or Stay - No forced authentication
Authenticated Users (Login Required)
For submitting audio generation requests:
- View Features - Read marketing content (same as guests)
- Enter Credentials - Type email and password
- Click Sign In - Submit form
- Redirect - Navigate to Request Order Form after successful authentication
Access Issues & Support
All access problems must go through support:
- No self-service registration - Users cannot create accounts
- No password reset feature - Users cannot reset their own passwords
- No "Forgot Password" link - Not available in MVP
Contact Support - For any issue:
- "If you need access or having problems logging in, please contact support"
- New account requests
- Lost or forgotten passwords
- Account locked out
- Login problems
- Technical issues
Next Step in Flow
After successful login → Request Order Form
Technical Notes
Content Management
There is no Content Management System (CMS) for the landing page marketing content. All text, headlines, and design elements are hardcoded in the frontend.
What IS managed in the Backoffice:
- ✅ Voice Gallery voices (add, edit, publish/unpublish, reorder)
- ✅ Voice samples (upload audio files)
- ✅ Voice characteristics and metadata
What is NOT managed in the Backoffice:
- ❌ Landing page text and headlines
- ❌ Marketing content and feature descriptions
- ❌ Testimonials and use cases
- ❌ Design elements and layouts
To update landing page content, frontend code changes are required.
Public Access
- Landing Page: Accessible to everyone without authentication
- Marketing Content: All feature information publicly viewable
- Audio Playback Page: Public audio pages with unique slugs (no login required)
- No Forced Login: Visitors can browse without signing in
Authentication (Required for Requests)
- Method: JWT token-based
- Trigger: Only required when user wants to submit a request
- Session: 24-hour expiry
- Form validation: Email format, required fields
- Error handling: Invalid credentials, rate limiting
- Responsive: Mobile-friendly layout
- Redirect: After login → Request Order Form (not landing page)
Access Management
- Public viewing: Anyone can see landing page
- Login required: Only for creating audio + QR codes
- No self-service features: No registration, no password reset
- Administrator-only: All account management through admin
- Security: Prevents unauthorized account creation
- Support: Users must contact administrator for all access issues
Error Messages
When login fails:
- "Invalid email or password"
- "Too many login attempts. Please try again in 15 minutes."
- Footer message: "Need help? Contact your administrator"
Not Included in MVP
- ❌ Self-service registration
- ❌ "Forgot Password" functionality
- ❌ Password reset links
- ❌ Email verification
- ❌ Social login (Google, Microsoft, etc.)
Access Control Summary
What Anyone Can Do (No Login) 🌐
- ✅ View landing page and read marketing content
- ✅ Browse platform features and benefits
- ✅ See demo account information
- ✅ Scan and listen to QR code audio (public playback pages)
What Requires Login 🔒
- ⛔ Submit new audio generation requests (max 1000 characters)
- ⛔ Access Request Order Form
- ⛔ Create audio + QR codes
- ⛔ View generation history (future feature)
Key Principle: MicDots landing page is public for marketing purposes. Authentication is only required to create/submit new audio requests.
Support Contact: If you need access or having problems logging in, please contact support.