<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Protevus - Build with Dart</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
/* Previous logo styles remain the same */
.logo {
display: flex;
align-items: center;
text-decoration: none;
padding: 8px 0;
}
.logo svg {
height: 28px;
width: auto;
}
.logo svg text {
fill: var(--text-color);
}
.dark-theme .logo svg text {
fill: #ffffff;
}
.logo-icon {
fill: url(#logoGradient);
}
.logo object, .logo img {
height: 32px;
width: auto;
transition: transform 0.2s ease;
}
.logo:hover object, .logo:hover img {
transform: scale(1.02);
}
.logo:hover .logo-icon {
filter: brightness(1.1);
}
.logo:hover .dot-accent {
animation: dotPulse 1.5s infinite;
}
.logo:hover .dot-accent:last-child {
animation: dotPulse 1.5s infinite 0.75s;
}
@keyframes dotPulse {
0% { opacity: 0.8; transform: scale(1) rotate(0deg); }
50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
100% { opacity: 0.8; transform: scale(1) rotate(360deg); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.logo:hover .logo-text {
text-shadow: 0 0 10px rgba(81, 43, 212, 0.3);
}
.logo::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(81, 43, 212, 0.2) 0%, transparent 70%);
transform: translate(-50%, -50%);
transition: all 0.3s ease;
pointer-events: none;
}
.logo:hover::after {
width: 100px;
height: 100px;
}
.logo:hover .atom-rings {
animation: spin 20s linear infinite;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark-theme');
document.getElementById('theme-icon').classList.replace('fa-moon', 'fa-sun');
}
document.querySelector('.theme-toggle').addEventListener('click', function() {
document.body.classList.toggle('dark-theme');
const themeIcon = document.getElementById('theme-icon');
if (document.body.classList.contains('dark-theme')) {
themeIcon.classList.replace('fa-moon', 'fa-sun');
} else {
themeIcon.classList.replace('fa-sun', 'fa-moon');
}
});
});
</script>
</head>
<body class="dark-theme">
<header>
<nav class="main-nav">
<div class="nav-left">
<a href="#" class="logo">
<object data="assets/protevus-logo.svg" type="image/svg+xml" width="200" height="50">
<img src="assets/protevus-logo.svg" alt="Protevus Logo" width="200" height="50">
</object>
</a>
<a href="#">Learn</a>
<a href="#">Documentation</a>
<a href="#">Community</a>
</div>
<div class="nav-right">
<button class="theme-toggle" title="Toggle theme">
<i id="theme-icon" class="fas fa-sun"></i>
</button>
<a href="#" class="download-button">Download</a>
<button class="search-button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</button>
</div>
</nav>
</header>
<main>
<section class="hero">
<div class="hero-content">
<h1>Build anything with Protevus</h1>
<p>Free. Cross-platform. Open source.</p>
<div class="hero-buttons">
<a href="#" class="primary-button">Download Protevus <i class="fas fa-download"></i></a>
<a href="#" class="secondary-button">Get Started <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</section>
<section class="features">
<div class="feature-grid">
<div class="feature-card">
<i class="fas fa-cloud feature-icon"></i>
<h3>Cloud Native Apps</h3>
<p>Build scalable, cloud-native applications using Dart and microservices architecture.</p>
<a href="#" class="feature-link">Learn more <i class="fas fa-arrow-right"></i></a>
</div>
<div class="feature-card">
<i class="fas fa-globe feature-icon"></i>
<h3>Web Apps</h3>
<p>Create modern web applications and APIs using Dart and Protevus Core.</p>
<a href="#" class="feature-link">Learn more <i class="fas fa-arrow-right"></i></a>
</div>
<div class="feature-card">
<i class="fas fa-mobile-alt feature-icon"></i>
<h3>Mobile Apps</h3>
<p>Build native mobile apps with Flutter and Protevus MAUI.</p>
<a href="#" class="feature-link">Learn more <i class="fas fa-arrow-right"></i></a>
</div>
<div class="feature-card">
<i class="fas fa-gamepad feature-icon"></i>
<h3>Game Development</h3>
<p>Create games using Flame and Protevus gaming frameworks.</p>
<a href="#" class="feature-link">Learn more <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</section>
<section class="tools">
<h2>Development Tools</h2>
<div class="tools-grid">
<div class="tool-card">
<i class="fas fa-code-branch"></i>
<h3>Protevus CLI</h3>
<p>Command-line tools for Protevus development with Dart integration.</p>
<a href="#" class="learn-more">Get Started <i class="fas fa-arrow-right"></i></a>
</div>
<div class="tool-card">
<i class="fas fa-terminal"></i>
<h3>DevTools</h3>
<p>Performance and debugging tools for Dart and Protevus apps.</p>
<a href="#" class="learn-more">Learn more <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</section>
<section class="ecosystem">
<h2>Ecosystem</h2>
<div class="ecosystem-grid">
<div class="eco-card">
<i class="fas fa-box-open"></i>
<h3>Pub Packages</h3>
<p>Discover and use Dart packages for Protevus development.</p>
<a href="#" class="learn-more">Browse Packages <i class="fas fa-arrow-right"></i></a>
</div>
<div class="eco-card">
<i class="fas fa-plug"></i>
<h3>Extensions</h3>
<p>IDE extensions and tools for enhanced Dart productivity.</p>
<a href="#" class="learn-more">View Extensions <i class="fas fa-arrow-right"></i></a>
</div>
<div class="eco-card">
<i class="fas fa-users"></i>
<h3>Community</h3>
<p>Join the growing community of Dart and Protevus developers.</p>
<a href="#" class="learn-more">Get Involved <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</section>
<section class="learning">
<h2>Learning Resources</h2>
<div class="learning-grid">
<div class="learning-card">
<i class="fas fa-graduation-cap"></i>
<h3>Tutorials</h3>
<p>Step-by-step guides to build with Dart and Protevus.</p>
<a href="#" class="learn-more">Start Learning <i class="fas fa-arrow-right"></i></a>
</div>
<div class="learning-card">
<i class="fas fa-book"></i>
<h3>Documentation</h3>
<p>Comprehensive guides and API references for Dart integration.</p>
<a href="#" class="learn-more">Read Docs <i class="fas fa-arrow-right"></i></a>
</div>
<div class="learning-card">
<i class="fas fa-video"></i>
<h3>Video Tutorials</h3>
<p>Watch and learn Dart development with Protevus.</p>
<a href="#" class="learn-more">Watch Now <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</section>
<section class="news">
<h2>Latest News</h2>
<div class="news-grid">
<article class="news-card">
<span class="news-date">March 2024</span>
<h3>Protevus 8 Release</h3>
<p>Experience enhanced Dart support and new features in Protevus 8.</p>
<a href="#" class="learn-more">Learn more <i class="fas fa-arrow-right"></i></a>
</article>
<article class="news-card">
<span class="news-date">March 2024</span>
<h3>Dart Integration Updates</h3>
<p>New Dart tooling and performance improvements.</p>
<a href="#" class="learn-more">Learn more <i class="fas fa-arrow-right"></i></a>
</article>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<div class="footer-section">
<h4>Protevus Platform</h4>
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Getting Started</a></li>
<li><a href="#">Release Notes</a></li>
<li><a href="#">Dart Integration</a></li>
<li><a href="#">Flutter Support</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Resources</h4>
<ul>
<li><a href="#">Documentation</a></li>
<li><a href="#">Learn</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Pub Packages</a></li>
<li><a href="#">Code Examples</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Community</h4>
<ul>
<li><a href="#">GitHub</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Discord</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Support</h4>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Issue Tracker</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Status</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Protevus</p>
</div>
</footer>
</body>
</html>