Michael Mainguy
6e6c09b5ba
- Add React Router with theme browser, theme detail, and layout detail pages - Implement manifest-based theme discovery for better performance - Add Welcome component as home page with feature overview - Fix layout and styling issues with proper CSS centering - Implement introspective theme browsing (dynamically discover colors/variables) - Add layout preview system with iframe scaling - Create comprehensive theme detail page with color palette display - Fix TypeScript errors and build issues - Remove hardcoded theme assumptions in favor of dynamic discovery 🤖 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="/themes" className="primary-button">
|
|
Browse Themes
|
|
</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="/themes" className="primary-button">
|
|
Explore Themes
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}; |