File size: 4,733 Bytes
effe6e2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
import React from 'react';
import { useNavigate } from 'react-router-dom';
const LandingPage: React.FC = () => {
const navigate = useNavigate();
return (
<div className="landing-container">
<header className="landing-header">
<div className="logo">LabAid AI</div>
<nav className="landing-nav">
<a href="#features">Features</a>
<a href="#how-it-works">How It Works</a>
<a href="#pricing">Pricing</a>
<span className="lang-select">English</span>
</nav>
</header>
<main className="landing-main">
<h1>AI-Powered Lab <span className="highlight">Troubleshooting</span></h1>
<p>Instantly diagnose and resolve equipment issues with our intelligent AI assistant. Get step-by-step solutions, maintenance tips, and expert guidance 24/7.</p>
<button className="start-btn" onClick={() => navigate('/chat')}>Start Troubleshooting</button>
<section className="how-it-works" id="how-it-works">
<h2>How It Works</h2>
<div className="steps">
<div className="step">
<div className="step-number">1</div>
<h3>Describe the Issue</h3>
<p>Simply tell our AI what's wrong with your equipment. Use natural language - no technical jargon required.</p>
</div>
<div className="step">
<div className="step-number">2</div>
<h3>Get AI Analysis</h3>
<p>Our advanced AI analyzes your description and equipment type to provide accurate diagnosis and solutions.</p>
</div>
<div className="step">
<div className="step-number">3</div>
<h3>Follow the Steps</h3>
<p>Receive detailed, step-by-step instructions with visual aids to resolve the issue quickly and safely.</p>
</div>
</div>
</section>
<section className="download-resources">
<h2>Download Resources</h2>
<div className="resources">
<div className="resource-card">
<h3>Equipment Manual</h3>
<p>Complete user manual for lab equipment operation and safety guidelines.</p>
<span>PDF · 2.4 MB</span>
<button>Download</button>
</div>
<div className="resource-card">
<h3>Troubleshooting Guide</h3>
<p>Step-by-step solutions for common equipment issues and error codes.</p>
<span>PDF · 1.8 MB</span>
<button>Download</button>
</div>
<div className="resource-card">
<h3>Maintenance Schedule</h3>
<p>Recommended maintenance timeline and procedures for optimal performance.</p>
<span>PDF · 0.9 MB</span>
<button>Download</button>
</div>
</div>
<a href="#all-documents" className="view-all">View All Documents →</a>
</section>
</main>
<footer className="labassist-footer">
<div className="footer-main-content">
<div className="footer-column company-info">
<div className="company-logo-section">
<span>LabAid AI</span>
</div>
<p>Revolutionizing lab equipment troubleshooting with AI-powered solutions.</p>
<div className="social-icons">
</div>
</div>
<div className="footer-column">
<h4>Product</h4>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">API</a></li>
<li><a href="#">Documentation</a></li>
</ul>
</div>
<div className="footer-column">
<h4>Support</h4>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Status</a></li>
<li><a href="#">Community</a></li>
</ul>
</div>
<div className="footer-column">
<h4>Company</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press</a></li>
</ul>
</div>
</div>
<div className="footer-bottom-bar">
<p>© 2024 LabAssist AI. All rights reserved.</p>
<div className="footer-legal-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
</div>
</div>
</footer>
</div>
);
};
export default LandingPage; |