Hugging Face's logo

Spaces:
5dimension
/
astralagi-clone-voyager
Running

App Files Community
5dimension commited on
Commit
c165f20
·
verified ·
1 Parent(s): 376f84f

make a clone of astralagi.com

Browse files
Files changed (10) hide show
  1. README.md +8 -5
  2. components/demo.js +69 -0
  3. components/features.js +85 -0
  4. components/footer.js +66 -0
  5. components/hero.js +57 -0
  6. components/navbar.js +59 -0
  7. components/pricing.js +125 -0
  8. index.html +46 -19
  9. script.js +20 -0
  10. style.css +70 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Astralagi Clone Voyager
3
- emoji: 🦀
4
- colorFrom: green
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: AstralAGI Clone Voyager 🚀
3
+ colorFrom: red
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/demo.js ADDED
@@ -0,0 +1,69 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomDemo extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .demo-container {
7
+ background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
8
+ }
9
+ .chat-bubble {
10
+ max-width: 70%;
11
+ padding: 1rem;
12
+ border-radius: 1rem;
13
+ margin-bottom: 1rem;
14
+ }
15
+ .user-bubble {
16
+ background: rgba(99, 102, 241, 0.2);
17
+ margin-left: auto;
18
+ }
19
+ .ai-bubble {
20
+ background: rgba(139, 92, 246, 0.2);
21
+ }
22
+ </style>
23
+ <section id="demo" class="py-20 px-4 sm:px-6 lg:px-8 demo-container">
24
+ <div class="max-w-4xl mx-auto">
25
+ <div class="text-center mb-16">
26
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
27
+ <span class="gradient-text">Live Demo</span>
28
+ </h2>
29
+ <p class="text-gray-400 max-w-2xl mx-auto">
30
+ Experience AstralAGI's capabilities firsthand with our interactive demo.
31
+ </p>
32
+ </div>
33
+ <div class="glass-card rounded-2xl p-8">
34
+ <div class="mb-6">
35
+ <h3 class="text-xl font-bold mb-4">Ask AstralAGI Anything</h3>
36
+ <div class="flex space-x-4 mb-4">
37
+ <button class="bg-primary-500/20 text-primary-500 px-4 py-2 rounded-md text-sm">
38
+ Explain quantum computing
39
+ </button>
40
+ <button class="bg-primary-500/20 text-primary-500 px-4 py-2 rounded-md text-sm">
41
+ Write a poem about space
42
+ </button>
43
+ <button class="bg-primary-500/20 text-primary-500 px-4 py-2 rounded-md text-sm">
44
+ Solve a math problem
45
+ </button>
46
+ </div>
47
+ </div>
48
+ <div class="space-y-4 max-h-96 overflow-y-auto p-4">
49
+ <div class="chat-bubble user-bubble">
50
+ What makes AstralAGI different from other AI systems?
51
+ </div>
52
+ <div class="chat-bubble ai-bubble">
53
+ AstralAGI represents a fundamental leap in artificial intelligence. Unlike specialized AI models that excel at single tasks, AstralAGI demonstrates true artificial general intelligence capabilities - it can reason across domains, transfer knowledge between unrelated concepts, and adapt to novel situations without additional training. Our system achieves this through...
54
+ </div>
55
+ </div>
56
+ <div class="mt-6 flex">
57
+ <input type="text" placeholder="Type your question here..."
58
+ class="flex-1 bg-gray-800 border border-gray-700 rounded-l-md px-4 py-3 text-white focus:outline-none focus:border-primary-500">
59
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-r-md font-medium">
60
+ Send
61
+ </button>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ </section>
66
+ `;
67
+ }
68
+ }
69
+ customElements.define('custom-demo', CustomDemo);
components/features.js ADDED
@@ -0,0 +1,85 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFeatures extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .feature-card {
7
+ transition: all 0.3s ease;
8
+ }
9
+ .feature-card:hover {
10
+ transform: translateY(-5px);
11
+ box-shadow: 0 10px 25px rgba(99, 102, 241, 0.2);
12
+ }
13
+ </style>
14
+ <section id="features" class="py-20 px-4 sm:px-6 lg:px-8 space-bg">
15
+ <div class="max-w-7xl mx-auto">
16
+ <div class="text-center mb-16">
17
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
18
+ <span class="gradient-text">Cosmic Capabilities</span>
19
+ </h2>
20
+ <p class="text-gray-400 max-w-2xl mx-auto">
21
+ Harness the power of artificial general intelligence with features that transcend traditional AI boundaries.
22
+ </p>
23
+ </div>
24
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
25
+ <div class="feature-card glass-card p-8 rounded-xl hover-scale">
26
+ <div class="w-14 h-14 bg-primary-500/10 rounded-lg flex items-center justify-center mb-6">
27
+ <i data-feather="brain" class="text-primary-500 w-6 h-6"></i>
28
+ </div>
29
+ <h3 class="text-xl font-bold mb-3">Advanced Reasoning</h3>
30
+ <p class="text-gray-400">
31
+ Multi-step logical reasoning with contextual understanding that mimics human thought processes.
32
+ </p>
33
+ </div>
34
+ <div class="feature-card glass-card p-8 rounded-xl hover-scale">
35
+ <div class="w-14 h-14 bg-primary-500/10 rounded-lg flex items-center justify-center mb-6">
36
+ <i data-feather="layers" class="text-primary-500 w-6 h-6"></i>
37
+ </div>
38
+ <h3 class="text-xl font-bold mb-3">Multi-Modal Processing</h3>
39
+ <p class="text-gray-400">
40
+ Simultaneous processing of text, images, audio, and video with unified understanding.
41
+ </p>
42
+ </div>
43
+ <div class="feature-card glass-card p-8 rounded-xl hover-scale">
44
+ <div class="w-14 h-14 bg-primary-500/10 rounded-lg flex items-center justify-center mb-6">
45
+ <i data-feather="database" class="text-primary-500 w-6 h-6"></i>
46
+ </div>
47
+ <h3 class="text-xl font-bold mb-3">Infinite Context</h3>
48
+ <p class="text-gray-400">
49
+ Handle conversations and documents of any length with our extended context window technology.
50
+ </p>
51
+ </div>
52
+ <div class="feature-card glass-card p-8 rounded-xl hover-scale">
53
+ <div class="w-14 h-14 bg-primary-500/10 rounded-lg flex items-center justify-center mb-6">
54
+ <i data-feather="shield" class="text-primary-500 w-6 h-6"></i>
55
+ </div>
56
+ <h3 class="text-xl font-bold mb-3">Quantum Security</h3>
57
+ <p class="text-gray-400">
58
+ Advanced encryption protocols that ensure your data remains secure against even quantum attacks.
59
+ </p>
60
+ </div>
61
+ <div class="feature-card glass-card p-8 rounded-xl hover-scale">
62
+ <div class="w-14 h-14 bg-primary-500/10 rounded-lg flex items-center justify-center mb-6">
63
+ <i data-feather="globe" class="text-primary-500 w-6 h-6"></i>
64
+ </div>
65
+ <h3 class="text-xl font-bold mb-3">Global Deployment</h3>
66
+ <p class="text-gray-400">
67
+ Deploy across multiple regions with automatic load balancing and intelligent resource allocation.
68
+ </p>
69
+ </div>
70
+ <div class="feature-card glass-card p-8 rounded-xl hover-scale">
71
+ <div class="w-14 h-14 bg-primary-500/10 rounded-lg flex items-center justify-center mb-6">
72
+ <i data-feather="code" class="text-primary-500 w-6 h-6"></i>
73
+ </div>
74
+ <h3 class="text-xl font-bold mb-3">Developer SDK</h3>
75
+ <p class="text-gray-400">
76
+ Comprehensive tools and APIs for seamless integration into your existing applications and workflows.
77
+ </p>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </section>
82
+ `;
83
+ }
84
+ }
85
+ customElements.define('custom-features', CustomFeatures);
components/footer.js ADDED
@@ -0,0 +1,66 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .footer-link {
7
+ transition: color 0.2s ease;
8
+ }
9
+ .footer-link:hover {
10
+ color: #8b5cf6;
11
+ }
12
+ </style>
13
+ <footer class="bg-gray-900 border-t border-gray-800 py-12 px-4 sm:px-6 lg:px-8">
14
+ <div class="max-w-7xl mx-auto">
15
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
16
+ <div class="md:col-span-2">
17
+ <a href="#" class="flex items-center space-x-2 mb-6">
18
+ <i data-feather="cpu" class="text-primary-500"></i>
19
+ <span class="text-xl font-bold gradient-text">AstralAGI</span>
20
+ </a>
21
+ <p class="text-gray-400 mb-6">
22
+ Pushing the boundaries of artificial general intelligence to create systems that think, learn, and reason like humans.
23
+ </p>
24
+ <div class="flex space-x-4">
25
+ <a href="#" class="text-gray-400 hover:text-white">
26
+ <i data-feather="twitter"></i>
27
+ </a>
28
+ <a href="#" class="text-gray-400 hover:text-white">
29
+ <i data-feather="github"></i>
30
+ </a>
31
+ <a href="#" class="text-gray-400 hover:text-white">
32
+ <i data-feather="linkedin"></i>
33
+ </a>
34
+ <a href="#" class="text-gray-400 hover:text-white">
35
+ <i data-feather="discord"></i>
36
+ </a>
37
+ </div>
38
+ </div>
39
+ <div>
40
+ <h3 class="text-lg font-semibold mb-4">Product</h3>
41
+ <ul class="space-y-2">
42
+ <li><a href="#" class="footer-link text-gray-400">Features</a></li>
43
+ <li><a href="#" class="footer-link text-gray-400">Pricing</a></li>
44
+ <li><a href="#" class="footer-link text-gray-400">Documentation</a></li>
45
+ <li><a href="#" class="footer-link text-gray-400">Releases</a></li>
46
+ </ul>
47
+ </div>
48
+ <div>
49
+ <h3 class="text-lg font-semibold mb-4">Company</h3>
50
+ <ul class="space-y-2">
51
+ <li><a href="#" class="footer-link text-gray-400">About</a></li>
52
+ <li><a href="#" class="footer-link text-gray-400">Blog</a></li>
53
+ <li><a href="#" class="footer-link text-gray-400">Careers</a></li>
54
+ <li><a href="#" class="footer-link text-gray-400">Contact</a></li>
55
+ </ul>
56
+ </div>
57
+ </div>
58
+ <div class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-400 text-sm">
59
+ <p>© 2023 AstralVoyager. All rights reserved.</p>
60
+ </div>
61
+ </div>
62
+ </footer>
63
+ `;
64
+ }
65
+ }
66
+ customElements.define('custom-footer', CustomFooter);
components/hero.js ADDED
@@ -0,0 +1,57 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomHero extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .hero-gradient {
7
+ background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.05) 90%);
8
+ }
9
+ </style>
10
+ <section class="space-bg star-field pt-32 pb-20 px-4 sm:px-6 lg:px-8">
11
+ <div class="max-w-7xl mx-auto">
12
+ <div class="text-center">
13
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
14
+ <span class="gradient-text">AstralAGI</span> - AI That Thinks Among Stars
15
+ </h1>
16
+ <p class="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto mb-10">
17
+ Next-generation artificial general intelligence platform that operates at cosmic scale, delivering unparalleled reasoning capabilities.
18
+ </p>
19
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
20
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-8 py-3 rounded-lg text-lg font-medium transition duration-300 hover-scale">
21
+ Start Building
22
+ </button>
23
+ <button class="glass-card hover:bg-gray-800/50 text-white px-8 py-3 rounded-lg text-lg font-medium transition duration-300 hover-scale">
24
+ View Documentation
25
+ </button>
26
+ </div>
27
+ </div>
28
+ <div class="mt-20 flex justify-center">
29
+ <div class="terminal-window p-6 rounded-2xl max-w-4xl w-full hover-scale">
30
+ <div class="flex items-center mb-4">
31
+ <div class="flex space-x-2">
32
+ <div class="w-3 h-3 bg-red-500 rounded-full"></div>
33
+ <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
34
+ <div class="w-3 h-3 bg-green-500 rounded-full"></div>
35
+ </div>
36
+ <div class="ml-4 text-gray-400 text-sm">terminal</div>
37
+ </div>
38
+ <div class="text-green-400 font-mono text-sm">
39
+ <span class="text-purple-400">$</span> astral deploy --model cosmic-mind
40
+ </div>
41
+ <div class="text-gray-300 font-mono text-sm mt-2">
42
+ > Initializing neural clusters... ✓
43
+ </div>
44
+ <div class="text-gray-300 font-mono text-sm">
45
+ > Deploying across 256 quantum cores... ✓
46
+ </div>
47
+ <div class="text-cyan-400 font-mono text-sm mt-2">
48
+ 🚀 AstralAGI v2.0 launched successfully!
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </section>
54
+ `;
55
+ }
56
+ }
57
+ customElements.define('custom-hero', CustomHero);
components/navbar.js ADDED
@@ -0,0 +1,59 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .nav-link {
7
+ position: relative;
8
+ }
9
+ .nav-link::after {
10
+ content: '';
11
+ position: absolute;
12
+ width: 0;
13
+ height: 2px;
14
+ bottom: -2px;
15
+ left: 0;
16
+ background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
17
+ transition: width 0.3s ease;
18
+ }
19
+ .nav-link:hover::after {
20
+ width: 100%;
21
+ }
22
+ </style>
23
+ <nav class="fixed w-full z-50 bg-gray-900/80 backdrop-blur-md border-b border-gray-800">
24
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
25
+ <div class="flex items-center justify-between h-16">
26
+ <div class="flex items-center">
27
+ <a href="#" class="flex items-center space-x-2">
28
+ <i data-feather="cpu" class="text-primary-500"></i>
29
+ <span class="text-xl font-bold gradient-text">AstralAGI</span>
30
+ </a>
31
+ </div>
32
+ <div class="hidden md:block">
33
+ <div class="ml-10 flex items-baseline space-x-8">
34
+ <a href="#" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Home</a>
35
+ <a href="#features" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Features</a>
36
+ <a href="#demo" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Demo</a>
37
+ <a href="#pricing" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Pricing</a>
38
+ <a href="#about" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">About</a>
39
+ </div>
40
+ </div>
41
+ <div class="flex items-center space-x-4">
42
+ <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-800">
43
+ <i data-feather="moon" class="hidden dark:block"></i>
44
+ <i data-feather="sun" class="dark:hidden"></i>
45
+ </button>
46
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
47
+ Launch App
48
+ </button>
49
+ <button class="md:hidden p-2 rounded-full hover:bg-gray-800">
50
+ <i data-feather="menu"></i>
51
+ </button>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </nav>
56
+ `;
57
+ }
58
+ }
59
+ customElements.define('custom-navbar', CustomNavbar);
components/pricing.js ADDED
@@ -0,0 +1,125 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomPricing extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .pricing-card {
7
+ transition: all 0.3s ease;
8
+ }
9
+ .pricing-card:hover {
10
+ transform: translateY(-8px);
11
+ box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
12
+ }
13
+ .popular-plan {
14
+ border: 2px solid #6366f1;
15
+ position: relative;
16
+ }
17
+ .popular-badge {
18
+ position: absolute;
19
+ top: -12px;
20
+ left: 50%;
21
+ transform: translateX(-50%);
22
+ background: #6366f1;
23
+ color: white;
24
+ padding: 0.25rem 1rem;
25
+ border-radius: 1rem;
26
+ font-size: 0.75rem;
27
+ font-weight: 600;
28
+ }
29
+ </style>
30
+ <section id="pricing" class="py-20 px-4 sm:px-6 lg:px-8 space-bg">
31
+ <div class="max-w-7xl mx-auto">
32
+ <div class="text-center mb-16">
33
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">
34
+ <span class="gradient-text">Cosmic Pricing</span>
35
+ </h2>
36
+ <p class="text-gray-400 max-w-2xl mx-auto">
37
+ Choose the plan that propels your AI journey to the next level.
38
+ </p>
39
+ </div>
40
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
41
+ <div class="pricing-card glass-card p-8 rounded-2xl hover-scale">
42
+ <h3 class="text-xl font-bold mb-4">Explorer</h3>
43
+ <div class="text-3xl font-bold mb-6">
44
+ <span class="gradient-text">$49</span>/mo
45
+ </div>
46
+ <ul class="space-y-3 mb-8">
47
+ <li class="flex items-center text-gray-400">
48
+ <i data-feather="check" class="text-green-500 w-4 h-4 mr-2"></i>
49
+ Up to 1M tokens per month
50
+ </li>
51
+ <li class="flex items-center text-gray-400">
52
+ <i data-feather="check" class="text-green-500 w-4 h-4 mr-2"></i>
53
+ Basic reasoning capabilities
54
+ </li>
55
+ <li class="flex items-center text-gray-400">
56
+ <i data-feather="check" class="text-green-500 w-4 h-4 mr-2"></i>
57
+ Email support
58
+ </li>
59
+ </ul>
60
+ <button class="w-full glass-card hover:bg-gray-800/50 text-white py-3 rounded-lg font-medium">
61
+ Get Started
62
+ </button>
63
+ </div>
64
+ <div class="pricing-card glass-card p-8 rounded-2xl hover-scale popular-plan">
65
+ <div class="popular-badge">Most Popular</div>
66
+ <h3 class="text-xl font-bold mb-4">Voyager</h3>
67
+ <div class="text-3xl font-bold mb-6">
68
+ <span class="gradient-text">$199</span>/mo
69
+ </div>
70
+ <ul class="space-y-3 mb-8">
71
+ <li class="flex items-center text-gray-400">
72
+ <i data-feather="check" class="text-green-500 w-4 h-4 mr-2"></i>
73
+ Up to 10M tokens per month
74
+ </li>
75
+ <li class="flex items-center text-gray-400">
76
+ <i data-feather="check" class="text-green-500 w-4 h-4 mr-2"></i>
77
+ Advanced reasoning & planning
78
+ </li>
79
+ <li class="flex items-center text-gray-400">
80
+ <i data-feather="check" class="text-green-500 w-4 h-4 mr-2"></i>
81
+ Priority support
82
+ </li>
83
+ <li class="flex items-center text-gray-400">
84
+ <i data-feather="check" class="text-green-500 w-4 h-4 mr-2"></i>
85
+ Custom model fine-tuning
86
+ </li>
87
+ </ul>
88
+ <button class="w-full bg-primary-500 hover:bg-primary-600 text-white py-3 rounded-lg font-medium">
89
+ Launch Voyager
90
+ </button>
91
+ </div>
92
+ <div class="pricing-card glass-card p-8 rounded-2xl hover-scale">
93
+ <h3 class="text-xl font-bold mb-4">Cosmic</h3>
94
+ <div class="text-3xl font-bold mb-6">
95
+ <span class="gradient-text">$999</span>/mo
96
+ </div>
97
+ <ul class="space-y-3 mb-8">
98
+ <li class="flex items-center text-gray-400">
99
+ <i data-feather="check" class="text-green-500 w-4 h-4 mr-2"></i>
100
+ Unlimited tokens
101
+ </li>
102
+ <li class="flex items-center text-gray-400">
103
+ <i data-feather="check" class="text-green-500 w-4 h-4 mr-2"></i>
104
+ Full AGI capabilities
105
+ </li>
106
+ <li class="flex items-center text-gray-400">
107
+ <i data-feather="check" class="text-green-500 w-4 h-4 mr-2"></i>
108
+ Dedicated engineering support
109
+ </li>
110
+ <li class="flex items-center text-gray-400">
111
+ <i data-feather="check" class="text-green-500 w-4 h-4 mr-2"></i>
112
+ Custom deployment options
113
+ </li>
114
+ </ul>
115
+ <button class="w-full glass-card hover:bg-gray-800/50 text-white py-3 rounded-lg font-medium">
116
+ Go Cosmic
117
+ </button>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </section>
122
+ `;
123
+ }
124
+ }
125
+ customElements.define('custom-pricing', CustomPricing);
index.html CHANGED
@@ -1,19 +1,46 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AstralAGI Clone - AI-Powered Cosmic Exploration</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/hero.js"></script>
13
+ <script src="components/features.js"></script>
14
+ <script src="components/demo.js"></script>
15
+ <script src="components/pricing.js"></script>
16
+ <script src="components/footer.js"></script>
17
+ </head>
18
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
19
+ <custom-navbar></custom-navbar>
20
+ <custom-hero></custom-hero>
21
+ <custom-features></custom-features>
22
+ <custom-demo></custom-demo>
23
+ <custom-pricing></custom-pricing>
24
+ <custom-footer></custom-footer>
25
+ <script src="script.js"></script>
26
+ <script>
27
+ feather.replace();
28
+ tailwind.config = {
29
+ darkMode: 'class',
30
+ theme: {
31
+ extend: {
32
+ colors: {
33
+ primary: {
34
+ 500: '#6366f1',
35
+ },
36
+ secondary: {
37
+ 500: '#8b5cf6',
38
+ }
39
+ }
40
+ }
41
+ }
42
+ }
43
+ </script>
44
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
45
+ </body>
46
+ </html>
script.js ADDED
@@ -0,0 +1,20 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', () => {
2
+ // Theme toggle functionality
3
+ const themeToggle = document.getElementById('theme-toggle');
4
+ if (themeToggle) {
5
+ themeToggle.addEventListener('click', () => {
6
+ document.documentElement.classList.toggle('dark');
7
+ localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
8
+ });
9
+ }
10
+
11
+ // Smooth scrolling for anchor links
12
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
13
+ anchor.addEventListener('click', function (e) {
14
+ e.preventDefault();
15
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
16
+ behavior: 'smooth'
17
+ });
18
+ });
19
+ });
20
+ });
style.css CHANGED
@@ -1,28 +1,80 @@
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
  body {
4
+ font-family: 'Inter', sans-serif;
5
+ }
6
+
7
+ .gradient-text {
8
+ background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
9
+ -webkit-background-clip: text;
10
+ background-clip: text;
11
+ color: transparent;
12
+ }
13
+ .glass-card {
14
+ background: rgba(255, 255, 255, 0.05);
15
+ backdrop-filter: blur(10px);
16
+ -webkit-backdrop-filter: blur(10px);
17
+ border: 1px solid rgba(255, 255, 255, 0.1);
18
+ }
19
+
20
+ .space-bg {
21
+ background: radial-gradient(circle at 50% 50%, rgba(30, 30, 60, 0.8) 0%, rgba(10, 10, 20, 0.9) 100%);
22
+ }
23
+
24
+ .orbit-animation {
25
+ animation: orbit 20s linear infinite;
26
+ }
27
+
28
+ @keyframes orbit {
29
+ 0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
30
+ 100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
31
  }
32
 
33
+ .star-field {
34
+ position: relative;
35
+ overflow: hidden;
36
  }
37
 
38
+ .star-field::before {
39
+ content: '';
40
+ position: absolute;
41
+ top: 0;
42
+ left: 0;
43
+ right: 0;
44
+ bottom: 0;
45
+ background-image:
46
+ radial-gradient(2px 2px at 20px 30px, #eee, transparent),
47
+ radial-gradient(2px 2px at 40px 70px, #fff, transparent),
48
+ radial-gradient(1px 1px at 90px 40px, #ddd, transparent),
49
+ radial-gradient(1px 1px at 130px 80px, #fff, transparent),
50
+ radial-gradient(1.5px 1.5px at 160px 30px, #eee, transparent);
51
+ background-repeat: repeat;
52
+ background-size: 200px 100px;
53
+ animation: twinkle 4s ease-in-out infinite alternate;
54
  }
55
 
56
+ @keyframes twinkle {
57
+ 0% { opacity: 0.3; }
58
+ 100% { opacity: 0.8; }
 
 
 
59
  }
60
 
61
+ .terminal-window {
62
+ background: #1a1b26;
63
+ border: 1px solid #2a2b3a;
64
+ border-radius: 8px;
65
+ font-family: 'Courier New', monospace;
66
  }
67
+
68
+ .code-snippet {
69
+ background: rgba(26, 27, 38, 0.8);
70
+ border: 1px solid rgba(42, 43, 58, 0.5);
71
+ border-radius: 6px;
72
+ font-family: 'Courier New', monospace;
73
+ }
74
+ .hover-scale {
75
+ transition: transform 0.3s ease;
76
+ }
77
+
78
+ .hover-scale:hover {
79
+ transform: scale(1.03);
80
+ }