302 lines
12 KiB
HTML
302 lines
12 KiB
HTML
|
<!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>
|