Michael Mainguy
98f8c649fe
- Hide aspect ratio selector and theme selector on NewPresentationPage while keeping them in DOM - Auto-select default theme (or first available theme) on page load - Default to 16:9 aspect ratio (already set) - Enable create button when title has at least 3 characters (instead of just non-empty) - Update validation message to specify 3-character minimum requirement - Streamline Welcome page to single "Get started" action button Users can now create presentations with just a title, using sensible defaults for theme and aspect ratio. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
124 lines
4.4 KiB
TypeScript
124 lines
4.4 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
export const Welcome: React.FC = () => {
|
|
return (
|
|
<div className="welcome-page">
|
|
<section className="hero-section">
|
|
<h1 className="hero-title">Welcome to Slideshare</h1>
|
|
<p className="hero-subtitle">
|
|
Create beautiful presentations with customizable themes and layouts
|
|
</p>
|
|
<div className="hero-actions">
|
|
<Link to="/presentations/new" className="primary-button">
|
|
Get started with a new presentation
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="features-section">
|
|
<h2 className="features-title">Features</h2>
|
|
<div className="features-grid">
|
|
<div className="feature-card">
|
|
<h3 className="feature-title">Theme System</h3>
|
|
<p className="feature-description">
|
|
Choose from professionally designed themes with customizable colors and layouts
|
|
</p>
|
|
</div>
|
|
|
|
<div className="feature-card">
|
|
<h3 className="feature-title">Multiple Layouts</h3>
|
|
<p className="feature-description">
|
|
Each theme includes various slide layouts for titles, content, images, and more
|
|
</p>
|
|
</div>
|
|
|
|
<div className="feature-card">
|
|
<h3 className="feature-title">No Backend Required</h3>
|
|
<p className="feature-description">
|
|
Works entirely in your browser with IndexDB storage - no server needed
|
|
</p>
|
|
</div>
|
|
|
|
<div className="feature-card">
|
|
<h3 className="feature-title">Presentation Notes</h3>
|
|
<p className="feature-description">
|
|
Add speaker notes to each slide for better presentation preparation
|
|
</p>
|
|
</div>
|
|
|
|
<div className="feature-card">
|
|
<h3 className="feature-title">Full Screen Mode</h3>
|
|
<p className="feature-description">
|
|
Present your slides in distraction-free full screen mode
|
|
</p>
|
|
</div>
|
|
|
|
<div className="feature-card">
|
|
<h3 className="feature-title">Customizable</h3>
|
|
<p className="feature-description">
|
|
Themes support custom CSS, fonts, colors, and images
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="getting-started-section">
|
|
<h2 className="section-title">Getting Started</h2>
|
|
<div className="steps-list">
|
|
<div className="step-item">
|
|
<div className="step-number">1</div>
|
|
<div className="step-content">
|
|
<h3 className="step-title">Browse Themes</h3>
|
|
<p className="step-description">
|
|
Explore available themes and preview their layouts
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="step-item">
|
|
<div className="step-number">2</div>
|
|
<div className="step-content">
|
|
<h3 className="step-title">Create Presentation</h3>
|
|
<p className="step-description">
|
|
Start a new presentation using your chosen theme
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="step-item">
|
|
<div className="step-number">3</div>
|
|
<div className="step-content">
|
|
<h3 className="step-title">Add Content</h3>
|
|
<p className="step-description">
|
|
Fill in text, images, and other content using theme layouts
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="step-item">
|
|
<div className="step-number">4</div>
|
|
<div className="step-content">
|
|
<h3 className="step-title">Present</h3>
|
|
<p className="step-description">
|
|
Share your presentation in full screen mode
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="cta-section">
|
|
<div className="cta-content">
|
|
<h2 className="cta-title">Ready to Create?</h2>
|
|
<p className="cta-description">
|
|
Start building your presentation with our theme collection
|
|
</p>
|
|
<Link to="/presentations/new" className="primary-button">
|
|
Create Your First Presentation
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}; |