docs: update How It Works page with comprehensive user guide
Replaced Lorem Ipsum placeholder with detailed step-by-step guide explaining the entire platform workflow from registration to rating. Content includes: - 10-step process (registration → check-in → matching → video exchange → rating) - Two matching methods: auto-matching and manual requests - Detailed explanation of WebRTC P2P video transfer - Features overview (Chat, Matching, Transfer, Profiles) - Tips for success and best practices - Links to other help resources Design improvements: - Numbered step badges with circular icons - Color-coded tip boxes for important information - Intro box highlighting main value proposition - Better visual hierarchy with custom styling - Responsive layout with proper spacing User-focused content: - Non-technical language (explains what, not how) - Practical instructions dancers can follow at events - Emphasis on community karma and fairness system - Mentions beta SUPPORTER tier benefits
This commit is contained in:
Radosław Gierwiało
@@ -41,6 +41,12 @@
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.content-wrapper ul {
|
||||
list-style: disc;
|
||||
margin-left: 1.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.content-wrapper li {
|
||||
margin-bottom: 0.75rem;
|
||||
color: #4b5563;
|
||||
@@ -66,55 +72,272 @@
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.intro-box {
|
||||
background-color: #f0f9ff;
|
||||
border-left: 4px solid #6366f1;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.intro-box p {
|
||||
margin-bottom: 0;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: #6366f1;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-weight: 700;
|
||||
margin-right: 0.75rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.tip-box {
|
||||
background-color: #fef3c7;
|
||||
border-left: 4px solid #f59e0b;
|
||||
padding: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.tip-box strong {
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.tip-box p {
|
||||
margin-bottom: 0;
|
||||
color: #78350f;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-style: italic;
|
||||
color: #6b7280;
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<h1>How It Works</h1>
|
||||
|
||||
<h2>Lorem Ipsum</h2>
|
||||
<div class="intro-box">
|
||||
<p>
|
||||
<strong>spotlight.cam</strong> helps dancers at West Coast Swing events find recording partners and exchange competition videos.
|
||||
No more running around looking for someone to film your heat – let the platform do the matching for you!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>Getting Started</h2>
|
||||
|
||||
<h3><span class="step-number">1</span>Create Your Account</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Register with your email, choose a username, and verify your email address.
|
||||
You can optionally link your WSDC ID to auto-fill your profile with competition data from worldsdc.com.
|
||||
</p>
|
||||
|
||||
<h2>Ut Enim Ad Minim</h2>
|
||||
|
||||
<h3><span class="step-number">2</span>Complete Your Profile</h3>
|
||||
<p>
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat:
|
||||
Add your name, location, and social media links. Upload a profile picture so other dancers can recognize you at the event.
|
||||
The more complete your profile, the easier it is to connect with other participants!
|
||||
</p>
|
||||
|
||||
<div class="tip-box">
|
||||
<p>
|
||||
<strong>Beta Testers:</strong> During our beta period, all new registrations automatically receive SUPPORTER status,
|
||||
giving you priority in the auto-matching system. Look for the ✨ badge next to your username!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>At the Event</h2>
|
||||
|
||||
<h3><span class="step-number">3</span>Check In to the Event</h3>
|
||||
<p>
|
||||
Find your event in the Events list and click "Check In". This lets other participants know you're at the event and available to help.
|
||||
You can check in anytime during the event – even before it officially starts.
|
||||
</p>
|
||||
|
||||
<h3><span class="step-number">4</span>Join the Event Chat</h3>
|
||||
<p>
|
||||
Once checked in, you can join the event chat room. This is where all the magic happens:
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>See who's at the event</strong> – Active users list updates in real-time</li>
|
||||
<li><strong>Coordinate with other dancers</strong> – Ask questions, find partners, share tips</li>
|
||||
<li><strong>Get updates</strong> – Organizers might share important announcements</li>
|
||||
</ul>
|
||||
|
||||
<h2>Getting Recording Partners</h2>
|
||||
|
||||
<p>There are two ways to get someone to record your heats:</p>
|
||||
|
||||
<h3><span class="step-number">5A</span>Auto-Matching (Recommended)</h3>
|
||||
<p>
|
||||
If the event organizer has set up competition heats in the system, you can use auto-matching:
|
||||
</p>
|
||||
<ol>
|
||||
<li><strong>Duis aute irure</strong> - Dolor in reprehenderit in voluptate velit esse cillum dolore</li>
|
||||
<li><strong>Eu fugiat nulla</strong> - Pariatur excepteur sint occaecat cupidatat non proident</li>
|
||||
<li><strong>Sunt in culpa</strong> - Qui officia deserunt mollit anim id est laborum</li>
|
||||
<li>Go to the <strong>Recording</strong> tab on the event page</li>
|
||||
<li>Browse through your competition heats</li>
|
||||
<li>The system will automatically suggest recording partners based on:
|
||||
<ul>
|
||||
<li>Who's free when you're dancing (they're not competing at the same time)</li>
|
||||
<li>Who hasn't been matched yet</li>
|
||||
<li>Fair distribution – everyone helps, everyone gets help</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Accept a suggestion and you're matched!</li>
|
||||
</ol>
|
||||
|
||||
<h2>Sed Ut Perspiciatis</h2>
|
||||
<div class="tip-box">
|
||||
<p>
|
||||
<strong>Fairness System:</strong> The auto-matching algorithm tracks how many recordings you've done versus received.
|
||||
If you help others record, you'll get priority when you need someone to record you. It's all about community karma!
|
||||
SUPPORTER and COMFORT tier users get even higher priority.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3><span class="step-number">5B</span>Manual Match Request</h3>
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
||||
Prefer to choose your own partner? No problem:
|
||||
</p>
|
||||
<ol>
|
||||
<li>Go to the <strong>Participants</strong> tab</li>
|
||||
<li>Click on any participant's name to view their profile</li>
|
||||
<li>Click <strong>"Send Match Request"</strong></li>
|
||||
<li>Wait for them to accept</li>
|
||||
</ol>
|
||||
<p>
|
||||
You can send match requests to anyone who's checked in to the event. They'll get a notification and can accept or decline.
|
||||
</p>
|
||||
|
||||
<h2>Nemo Enim Ipsam</h2>
|
||||
<h2>Recording & Exchanging Videos</h2>
|
||||
|
||||
<h3><span class="step-number">6</span>Chat with Your Match</h3>
|
||||
<p>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||
Once matched, you get a private 1:1 chat with your recording partner. Use it to:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Introduce yourselves and confirm you've found each other</li>
|
||||
<li>Share your heat times and divisions</li>
|
||||
<li>Coordinate where to meet ("I'll be by the judges' table")</li>
|
||||
<li>Discuss what you want recorded (full heat, specific couples, angles, etc.)</li>
|
||||
</ul>
|
||||
|
||||
<h3><span class="step-number">7</span>Record the Heat</h3>
|
||||
<p>
|
||||
This is the fun part – you're helping a fellow dancer capture their competition moment!
|
||||
Record their heat on your phone, then head back to the platform.
|
||||
</p>
|
||||
|
||||
<h3>Neque Porro Quisquam</h3>
|
||||
|
||||
<h3><span class="step-number">8</span>Send the Video (P2P Transfer)</h3>
|
||||
<p>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
|
||||
Here's where spotlight.cam gets technical (in a good way):
|
||||
</p>
|
||||
<ol>
|
||||
<li>In your match chat, click <strong>"Send File"</strong></li>
|
||||
<li>Select the video from your phone</li>
|
||||
<li>The platform uses WebRTC to send it <strong>directly from your device to theirs</strong></li>
|
||||
<li>No uploading to servers, no waiting, no storage limits</li>
|
||||
<li>Progress bar shows how the transfer is going</li>
|
||||
</ol>
|
||||
|
||||
<div class="tip-box">
|
||||
<p>
|
||||
<strong>Why P2P?</strong> Your videos never touch our servers – they go straight from your phone to your partner's phone.
|
||||
This means faster transfers, better privacy, and no file size limits. We've tested transfers up to 700MB+!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>After the Exchange</h2>
|
||||
|
||||
<h3><span class="step-number">9</span>Rate Your Partner</h3>
|
||||
<p>
|
||||
Once you've exchanged videos, you can rate your experience:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Give them 1-5 stars</li>
|
||||
<li>Leave a comment about how it went</li>
|
||||
<li>Mark if you'd collaborate again</li>
|
||||
</ul>
|
||||
<p>
|
||||
Ratings help build trust in the community and let others know who's reliable, helpful, and easy to work with.
|
||||
Plus, it helps the fairness algorithm work better for everyone!
|
||||
</p>
|
||||
|
||||
<h3><span class="step-number">10</span>View Your History</h3>
|
||||
<p>
|
||||
Check your <strong>History</strong> page to see:
|
||||
</p>
|
||||
<ul>
|
||||
<li>All your past matches and video exchanges</li>
|
||||
<li>Ratings you've received from partners</li>
|
||||
<li>Your collaboration stats</li>
|
||||
</ul>
|
||||
|
||||
<h2>Features Overview</h2>
|
||||
|
||||
<h3>Real-Time Chat</h3>
|
||||
<ul>
|
||||
<li>Event-wide chat rooms for all participants</li>
|
||||
<li>Private 1:1 chats with your matches</li>
|
||||
<li>See who's online and active</li>
|
||||
<li>Spam protection keeps conversations clean</li>
|
||||
</ul>
|
||||
|
||||
<h3>Smart Matching</h3>
|
||||
<ul>
|
||||
<li>Auto-matching based on heat schedules</li>
|
||||
<li>Fairness algorithm ensures everyone helps and gets help</li>
|
||||
<li>Account tiers (BASIC, SUPPORTER, COMFORT) with priority matching</li>
|
||||
<li>Manual requests for complete control</li>
|
||||
</ul>
|
||||
|
||||
<h3>P2P Video Transfer</h3>
|
||||
<ul>
|
||||
<li>Direct device-to-device transfers using WebRTC</li>
|
||||
<li>End-to-end encrypted (your videos are private)</li>
|
||||
<li>No file size limits – send full 4K videos if you want</li>
|
||||
<li>Progress tracking so you know when it's done</li>
|
||||
</ul>
|
||||
|
||||
<h3>Public Profiles</h3>
|
||||
<ul>
|
||||
<li>See other dancers' profiles, ratings, and stats</li>
|
||||
<li>Link your social media (YouTube, Instagram, Facebook, TikTok)</li>
|
||||
<li>Build your reputation as a reliable recording partner</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Tips for Success</h2>
|
||||
|
||||
<ul>
|
||||
<li><strong>Check in early</strong> – The sooner you check in, the more time the system has to match you</li>
|
||||
<li><strong>Be responsive</strong> – Check your match requests and chat messages regularly</li>
|
||||
<li><strong>Communicate clearly</strong> – Use the chat to coordinate meetup spots and timing</li>
|
||||
<li><strong>Help others first</strong> – The karma system rewards those who contribute to the community</li>
|
||||
<li><strong>Rate your partners</strong> – It takes 30 seconds and helps everyone</li>
|
||||
<li><strong>Keep your phone charged</strong> – WebRTC transfers can use battery, especially for large files</li>
|
||||
</ul>
|
||||
|
||||
<h2>Need Help?</h2>
|
||||
|
||||
<p>
|
||||
If you run into any issues or have questions, check out:
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href="/about-us">About Us</a> – Learn more about the platform</li>
|
||||
<li><a href="/contact">Contact Us</a> – Get in touch with our support team</li>
|
||||
<li><a href="/privacy">Privacy Policy</a> – Understand how we protect your data</li>
|
||||
</ul>
|
||||
|
||||
<p class="footer-text">
|
||||
For questions or feedback, <a href="/contact">contact us</a>.
|
||||
Ready to get started? <a href="/register">Create your account</a> and join the community!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user