mirror of
https://github.com/AeThex-Corporation/AeThex-OS.git
synced 2026-04-26 01:47:20 +00:00
248 lines
11 KiB
TypeScript
248 lines
11 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Download, CheckCircle, Loader2, Monitor, Zap, Shield, Code } from 'lucide-react';
|
|
|
|
export default function DownloadPage() {
|
|
const [downloading, setDownloading] = useState(false);
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
const handleDownload = async () => {
|
|
setDownloading(true);
|
|
setProgress(0);
|
|
|
|
try {
|
|
// Fetch the installer
|
|
const response = await fetch('/api/download/desktop');
|
|
const contentLength = response.headers.get('content-length');
|
|
const total = parseInt(contentLength || '0', 10);
|
|
|
|
const reader = response.body?.getReader();
|
|
const chunks: Uint8Array[] = [];
|
|
let receivedLength = 0;
|
|
|
|
if (reader) {
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
|
|
chunks.push(value);
|
|
receivedLength += value.length;
|
|
setProgress(Math.round((receivedLength / total) * 100));
|
|
}
|
|
}
|
|
|
|
// Combine chunks and create blob
|
|
const blob = new Blob(chunks);
|
|
const url = window.URL.createObjectURL(blob);
|
|
|
|
// Trigger download
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'AeThex-OS-setup.exe';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
window.URL.revokeObjectURL(url);
|
|
|
|
setProgress(100);
|
|
|
|
// Show success message
|
|
setTimeout(() => {
|
|
setDownloading(false);
|
|
setProgress(0);
|
|
}, 2000);
|
|
} catch (error) {
|
|
console.error('Download failed:', error);
|
|
setDownloading(false);
|
|
setProgress(0);
|
|
alert('Download failed. Please try again.');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-black text-white">
|
|
{/* Hero Section */}
|
|
<div className="container mx-auto px-4 py-20">
|
|
<div className="text-center max-w-4xl mx-auto">
|
|
<h1 className="text-6xl font-bold mb-6 bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent">
|
|
Download AeThex OS
|
|
</h1>
|
|
<p className="text-xl text-gray-300 mb-12">
|
|
The complete learning ecosystem. Build, learn, and deploy compliant software.
|
|
</p>
|
|
|
|
{/* Download Button */}
|
|
<div className="bg-gray-800/50 backdrop-blur-lg rounded-2xl p-8 border border-gray-700 max-w-2xl mx-auto">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="text-left">
|
|
<h3 className="text-2xl font-bold mb-2">AeThex OS Desktop</h3>
|
|
<p className="text-gray-400">Version 0.1.0 • Windows x64 • 2.5 MB</p>
|
|
</div>
|
|
<Monitor className="w-12 h-12 text-purple-400" />
|
|
</div>
|
|
|
|
{!downloading ? (
|
|
<button
|
|
onClick={handleDownload}
|
|
className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-4 px-8 rounded-xl transition-all transform hover:scale-105 flex items-center justify-center gap-3 text-lg"
|
|
>
|
|
<Download className="w-6 h-6" />
|
|
Download for Windows
|
|
</button>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-center gap-3 text-lg font-semibold">
|
|
{progress < 100 ? (
|
|
<>
|
|
<Loader2 className="w-6 h-6 animate-spin" />
|
|
Downloading... {progress}%
|
|
</>
|
|
) : (
|
|
<>
|
|
<CheckCircle className="w-6 h-6 text-green-400" />
|
|
Download Complete!
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="w-full bg-gray-700 rounded-full h-3 overflow-hidden">
|
|
<div
|
|
className="bg-gradient-to-r from-purple-600 to-pink-600 h-full transition-all duration-300"
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
{progress === 100 && (
|
|
<p className="text-sm text-gray-400">
|
|
Open the downloaded file to install AeThex OS
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-6 text-sm text-gray-400 text-center">
|
|
Supports Windows 10 and later
|
|
</div>
|
|
</div>
|
|
|
|
{/* Installation Steps */}
|
|
<div className="mt-16 grid md:grid-cols-3 gap-6 text-left">
|
|
<div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
|
|
<div className="w-12 h-12 bg-purple-600/20 rounded-lg flex items-center justify-center mb-4">
|
|
<span className="text-2xl font-bold text-purple-400">1</span>
|
|
</div>
|
|
<h3 className="text-lg font-bold mb-2">Download</h3>
|
|
<p className="text-gray-400">Click the download button to get the installer</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
|
|
<div className="w-12 h-12 bg-purple-600/20 rounded-lg flex items-center justify-center mb-4">
|
|
<span className="text-2xl font-bold text-purple-400">2</span>
|
|
</div>
|
|
<h3 className="text-lg font-bold mb-2">Install</h3>
|
|
<p className="text-gray-400">Run the installer and follow the setup wizard</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
|
|
<div className="w-12 h-12 bg-purple-600/20 rounded-lg flex items-center justify-center mb-4">
|
|
<span className="text-2xl font-bold text-purple-400">3</span>
|
|
</div>
|
|
<h3 className="text-lg font-bold mb-2">Start Learning</h3>
|
|
<p className="text-gray-400">Launch AeThex OS and begin your journey</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<div className="mt-24 max-w-6xl mx-auto">
|
|
<h2 className="text-4xl font-bold text-center mb-12">What's Inside</h2>
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
|
|
<Code className="w-10 h-10 text-purple-400 mb-4" />
|
|
<h3 className="text-xl font-bold mb-2">Full IDE</h3>
|
|
<p className="text-gray-400">Monaco editor with syntax highlighting and IntelliSense</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
|
|
<Monitor className="w-10 h-10 text-pink-400 mb-4" />
|
|
<h3 className="text-xl font-bold mb-2">Terminal</h3>
|
|
<p className="text-gray-400">Full-featured terminal with command execution</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
|
|
<Zap className="w-10 h-10 text-blue-400 mb-4" />
|
|
<h3 className="text-xl font-bold mb-2">AeThex Language</h3>
|
|
<p className="text-gray-400">Write once, compile to JS, Lua, Verse, C#</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
|
|
<Shield className="w-10 h-10 text-green-400 mb-4" />
|
|
<h3 className="text-xl font-bold mb-2">Compliance</h3>
|
|
<p className="text-gray-400">Built-in COPPA, GDPR, CCPA compliance tools</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* System Requirements */}
|
|
<div className="mt-24 max-w-4xl mx-auto bg-gray-800/30 backdrop-blur-sm rounded-xl p-8 border border-gray-700">
|
|
<h2 className="text-3xl font-bold mb-6">System Requirements</h2>
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
<div>
|
|
<h3 className="text-xl font-semibold mb-4 text-purple-400">Minimum</h3>
|
|
<ul className="space-y-2 text-gray-300">
|
|
<li>• Windows 10 or later</li>
|
|
<li>• 4 GB RAM</li>
|
|
<li>• 500 MB available space</li>
|
|
<li>• 1280x720 display</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-semibold mb-4 text-pink-400">Recommended</h3>
|
|
<ul className="space-y-2 text-gray-300">
|
|
<li>• Windows 11</li>
|
|
<li>• 8 GB RAM or more</li>
|
|
<li>• 2 GB available space</li>
|
|
<li>• 1920x1080 display</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* FAQ */}
|
|
<div className="mt-24 max-w-4xl mx-auto">
|
|
<h2 className="text-4xl font-bold text-center mb-12">Frequently Asked Questions</h2>
|
|
<div className="space-y-6">
|
|
<div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
|
|
<h3 className="text-xl font-bold mb-2">Is AeThex OS free?</h3>
|
|
<p className="text-gray-400">Yes! AeThex OS is completely free to download and use.</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
|
|
<h3 className="text-xl font-bold mb-2">Does it require an internet connection?</h3>
|
|
<p className="text-gray-400">You can use many features offline, but some features like cloud sync and updates require internet.</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
|
|
<h3 className="text-xl font-bold mb-2">How do I get updates?</h3>
|
|
<p className="text-gray-400">AeThex OS automatically checks for updates and will notify you when a new version is available.</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
|
|
<h3 className="text-xl font-bold mb-2">Is my data safe?</h3>
|
|
<p className="text-gray-400">Yes. All your data is stored locally on your device. Optional cloud sync is encrypted end-to-end.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
<div className="mt-24 text-center">
|
|
<h2 className="text-4xl font-bold mb-6">Ready to start building?</h2>
|
|
<button
|
|
onClick={handleDownload}
|
|
className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-4 px-12 rounded-xl transition-all transform hover:scale-105 inline-flex items-center gap-3 text-lg"
|
|
>
|
|
<Download className="w-6 h-6" />
|
|
Download Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|