File size: 11,586 Bytes
35859aa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
949f474
 
 
 
 
 
 
5b1b4f3
 
4bd35f1
5b1b4f3
8df57b3
9e2b812
9909792
 
be3690e
5b1b4f3
4bd35f1
35859aa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4bd35f1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35859aa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
949f474
 
 
 
35859aa
949f474
35859aa
 
 
 
 
 
 
 
 
 
 
 
b46a7cb
35859aa
 
 
80f35e8
35859aa
aea3cda
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuantumCode AI Architect</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Space Grotesk', sans-serif;
            background-color: #0f172a;
            color: #e2e8f0;
        }
        
        .gradient-text {
            background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .glass-card {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1rem;
        }
    </style>
</head>
<body class="min-h-screen">
    <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
    
    <nav class="px-6 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i data-feather="cpu" class="text-indigo-500"></i>
            <span class="text-xl font-bold gradient-text">QuantumCode</span>
        </div>
        <div class="flex items-center space-x-2">
            <a href="i18n-setup.html" class="flex items-center text-sm hover:text-indigo-400 transition-colors">
                <i data-feather="globe" class="w-4 h-4 mr-1"></i>
                <span id="currentLang">EN</span>
            </a>
        </div>
<div class="hidden md:flex space-x-8">
                <a href="#features" class="hover:text-indigo-400 transition-colors">Features</a>
                <a href="#roadmap" class="hover:text-indigo-400 transition-colors">Roadmap</a>
                <a href="data-architecture.html" class="hover:text-indigo-400 transition-colors">Data Architecture</a>
                <a href="learning-engine.html" class="hover:text-indigo-400 transition-colors">Learning Engine</a>
                <a href="auth.html" class="hover:text-indigo-400 transition-colors">Login</a>
                <a href="select-role.html" class="hover:text-indigo-400 transition-colors">Roles</a>
            <a href="progress-report.html" class="hover:text-indigo-400 transition-colors">Progress</a>
            <a href="self-talk-journal.html" class="hover:text-indigo-400 transition-colors">Self-Talk</a>
            <a href="gamequest.html" class="hover:text-indigo-400 transition-colors">GameQuest</a>
</div>
<button class="md:hidden">
            <i data-feather="menu"></i>
        </button>
    </nav>
    
    <main class="container mx-auto px-4 py-16">
        <section class="max-w-4xl mx-auto text-center mb-20">
            <h1 class="text-5xl md:text-6xl font-bold mb-6">
                <span class="gradient-text">AI-Powered</span> Development<br>Ecosystem
            </h1>
            <p class="text-xl text-slate-300 mb-10 max-w-2xl mx-auto">
                QuantumCode bridges the gap between AI and development with atomic task execution, monorepo architecture, and intelligent automation.
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <button class="px-8 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-full font-medium transition-colors">
                    Get Started
                </button>
                <button class="px-8 py-3 border border-indigo-500 text-indigo-400 hover:bg-indigo-900/50 rounded-full font-medium transition-colors">
                    Explore Features
                </button>
            </div>
        </section>
        
        <section class="grid md:grid-cols-3 gap-8 mb-20">
            <div class="glass-card p-8">
                <div class="w-12 h-12 rounded-full bg-indigo-900/50 flex items-center justify-center mb-4">
                    <i data-feather="box" class="text-indigo-400"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">Atomic Architecture</h3>
                <p class="text-slate-300">Independent, self-contained tasks with single purpose and clear outcome.</p>
            </div>
            
            <div class="glass-card p-8">
                <div class="w-12 h-12 rounded-full bg-indigo-900/50 flex items-center justify-center mb-4">
                    <i data-feather="layers" class="text-indigo-400"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">Monorepo System</h3>
                <p class="text-slate-300">Unified codebase for backend, frontend and mobile applications.</p>
            </div>
            
            <div class="glass-card p-8">
                <div class="w-12 h-12 rounded-full bg-indigo-900/50 flex items-center justify-center mb-4">
                    <i data-feather="zap" class="text-indigo-400"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">AI Automation</h3>
                <p class="text-slate-300">Intelligent CI/CD pipelines and environment management.</p>
            </div>
        </section>
        
        <section class="glass-card p-8 md:p-12 mb-20">
            <h2 class="text-3xl font-bold mb-8 text-center">Project Roadmap</h2>
            
            <div class="space-y-8">
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="md:w-1/4">
                        <div class="bg-indigo-900/20 px-4 py-2 rounded-full inline-block">
                            <span class="text-indigo-400 font-medium">Sprint 1-2</span>
                        </div>
                        <h3 class="text-xl font-bold mt-3">System Foundation</h3>
                    </div>
                    <div class="md:w-3/4">
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <div class="w-2 h-2 bg-indigo-500 rounded-full mt-2 mr-3"></div>
                                <span>Create base project structure (monorepo: backend, frontend, mobile)</span>
                            </li>
                            <li class="flex items-start">
                                <div class="w-2 h-2 bg-indigo-500 rounded-full mt-2 mr-3"></div>
                                <span>Setup CI/CD (GitHub Actions + Docker + Kubernetes templates)</span>
                            </li>
                            <li class="flex items-start">
                                <div class="w-2 h-2 bg-indigo-500 rounded-full mt-2 mr-3"></div>
                                <span>Deploy PostgreSQL + Redis infrastructure</span>
                            </li>
                            <li class="flex items-start">
                                <div class="w-2 h-2 bg-indigo-500 rounded-full mt-2 mr-3"></div>
                                <span>Configure environment management (DEV/STAGE/PROD)</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="border-t border-slate-700/50 my-6"></div>

                <div class="flex flex-col md:flex-row gap-6">
                    <div class="md:w-1/4">
                        <div class="bg-indigo-900/20 px-4 py-2 rounded-full inline-block">
                            <span class="text-indigo-400 font-medium">Sprint 2-3</span>
                        </div>
                        <h3 class="text-xl font-bold mt-3">Data Architecture</h3>
                    </div>
                    <div class="md:w-3/4">
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <div class="w-2 h-2 bg-indigo-500 rounded-full mt-2 mr-3"></div>
                                <span>Define core data models (User, Course, Lesson, Progress)</span>
                            </li>
                            <li class="flex items-start">
                                <div class="w-2 h-2 bg-indigo-500 rounded-full mt-2 mr-3"></div>
                                <span>Setup ORM with SQLAlchemy/Prisma</span>
                            </li>
                            <li class="flex items-start">
                                <div class="w-2 h-2 bg-indigo-500 rounded-full mt-2 mr-3"></div>
                                <span>Create database migrations</span>
                            </li>
                            <li class="flex items-start">
                                <div class="w-2 h-2 bg-indigo-500 rounded-full mt-2 mr-3"></div>
                                <span>Implement confidence metrics tracking</span>
                            </li>
                        </ul>
                    </div>
                </div>
<div class="flex flex-col md:flex-row gap-6 opacity-70">
                    <div class="md:w-1/4">
                        <div class="bg-slate-700/50 px-4 py-2 rounded-full inline-block">
                            <span class="text-slate-400 font-medium">Future</span>
                        </div>
                        <h3 class="text-xl font-bold mt-3">AI Integration</h3>
                    </div>
                    <div class="md:w-3/4">
                        <p class="text-slate-400">Quantum machine learning models for code optimization and automatic task generation.</p>
                    </div>
                </div>
            </div>
        </section>
    </main>
    
    <footer class="py-12 border-t border-slate-800">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center space-x-2 mb-6 md:mb-0">
                    <i data-feather="cpu" class="text-indigo-500"></i>
                    <span class="text-xl font-bold gradient-text">QuantumCode</span>
                </div>
                
                <div class="flex space-x-6">
                    <a href="#"><i data-feather="github"></i></a>
                    <a href="#"><i data-feather="twitter"></i></a>
                    <a href="#"><i data-feather="linkedin"></i></a>
                    <a href="#"><i data-feather="mail"></i></a>
                </div>
            </div>
            
            <div class="mt-8 text-center text-slate-500 text-sm">
                <p>© 2023 QuantumCode AI Architect. All rights reserved.</p>
            </div>
        </div>
    </footer>
    <script>
        // Set initial language
        document.getElementById('currentLang').textContent = 
            document.cookie.match('(^|;)\\s*NEXT_LOCALE\\s*=\\s*([^;]+)')?.pop() || 'EN';

        VANTA.GLOBE({
el: "#vanta-bg",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0x4f46e5,
            backgroundColor: 0x0f172a,
            size: 0.8
        });
    </script>
    <script src="components/voice-track.js"></script>
    <script>
        feather.replace();
    </script>
<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
</body>
</html>