Skip to content

Commit 29b035c

Browse files
SamoraDCclaude
SamoraDC
and
claude
committed
fix: Replace 3D components with static page to resolve rendering issue
- Created simplified page without Three.js/React Three Fiber components - Added static HTML fallback page with full styling - Backed up original 3D page for future debugging - This temporary solution ensures the site loads properly on GitHub Pages The issue appears to be related to WebGL/Three.js initialization on GitHub Pages. Will investigate proper 3D rendering solution in a separate branch. 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
1 parent dc0a9ad commit 29b035c

4 files changed

Lines changed: 525 additions & 26 deletions

File tree

‎public/index.html‎

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,289 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>QuantumGraph - Universo de Soluções em IA</title>
7+
<meta name="description" content="Navegue pelo universo interativo de grafos 3D da QuantumGraph. Especializados em IA, Machine Learning e soluções computacionais avançadas.">
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
body {
16+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
17+
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
18+
color: #ffffff;
19+
min-height: 100vh;
20+
overflow-x: hidden;
21+
}
22+
23+
.container {
24+
max-width: 1200px;
25+
margin: 0 auto;
26+
padding: 2rem;
27+
}
28+
29+
header {
30+
text-align: center;
31+
padding: 4rem 0;
32+
animation: fadeIn 1s ease-in;
33+
}
34+
35+
h1 {
36+
font-size: 4rem;
37+
font-weight: bold;
38+
background: linear-gradient(45deg, #00ffff, #8b5cf6);
39+
-webkit-background-clip: text;
40+
-webkit-text-fill-color: transparent;
41+
background-clip: text;
42+
margin-bottom: 1rem;
43+
animation: glow 2s ease-in-out infinite alternate;
44+
}
45+
46+
.tagline {
47+
font-size: 1.5rem;
48+
color: #a0a0a0;
49+
margin-bottom: 2rem;
50+
}
51+
52+
.features {
53+
display: grid;
54+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
55+
gap: 2rem;
56+
margin-top: 4rem;
57+
}
58+
59+
.feature-card {
60+
background: rgba(255, 255, 255, 0.05);
61+
border: 1px solid rgba(0, 255, 255, 0.2);
62+
border-radius: 1rem;
63+
padding: 2rem;
64+
backdrop-filter: blur(10px);
65+
transition: transform 0.3s ease, box-shadow 0.3s ease;
66+
animation: slideUp 0.6s ease-out;
67+
}
68+
69+
.feature-card:hover {
70+
transform: translateY(-5px);
71+
box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
72+
border-color: rgba(0, 255, 255, 0.5);
73+
}
74+
75+
.feature-card h3 {
76+
color: #00ffff;
77+
margin-bottom: 1rem;
78+
font-size: 1.5rem;
79+
}
80+
81+
.feature-card p {
82+
color: #c0c0c0;
83+
line-height: 1.6;
84+
}
85+
86+
.cta-button {
87+
display: inline-block;
88+
margin-top: 3rem;
89+
padding: 1rem 3rem;
90+
background: linear-gradient(45deg, #00ffff, #8b5cf6);
91+
color: white;
92+
text-decoration: none;
93+
border-radius: 2rem;
94+
font-weight: bold;
95+
font-size: 1.1rem;
96+
transition: transform 0.3s ease, box-shadow 0.3s ease;
97+
animation: pulse 2s infinite;
98+
}
99+
100+
.cta-button:hover {
101+
transform: scale(1.05);
102+
box-shadow: 0 10px 40px rgba(139, 92, 246, 0.4);
103+
}
104+
105+
.tech-stack {
106+
margin-top: 4rem;
107+
text-align: center;
108+
padding: 2rem;
109+
background: rgba(255, 255, 255, 0.03);
110+
border-radius: 1rem;
111+
}
112+
113+
.tech-stack h2 {
114+
color: #8b5cf6;
115+
margin-bottom: 2rem;
116+
font-size: 2rem;
117+
}
118+
119+
.tech-list {
120+
display: flex;
121+
flex-wrap: wrap;
122+
justify-content: center;
123+
gap: 1rem;
124+
}
125+
126+
.tech-item {
127+
background: rgba(139, 92, 246, 0.1);
128+
border: 1px solid rgba(139, 92, 246, 0.3);
129+
padding: 0.5rem 1rem;
130+
border-radius: 1rem;
131+
color: #e0e0e0;
132+
transition: all 0.3s ease;
133+
}
134+
135+
.tech-item:hover {
136+
background: rgba(139, 92, 246, 0.2);
137+
transform: translateY(-2px);
138+
}
139+
140+
@keyframes fadeIn {
141+
from { opacity: 0; }
142+
to { opacity: 1; }
143+
}
144+
145+
@keyframes slideUp {
146+
from {
147+
opacity: 0;
148+
transform: translateY(30px);
149+
}
150+
to {
151+
opacity: 1;
152+
transform: translateY(0);
153+
}
154+
}
155+
156+
@keyframes glow {
157+
from {
158+
text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
159+
}
160+
to {
161+
text-shadow: 0 0 20px rgba(139, 92, 246, 0.8), 0 0 30px rgba(0, 255, 255, 0.5);
162+
}
163+
}
164+
165+
@keyframes pulse {
166+
0%, 100% {
167+
transform: scale(1);
168+
}
169+
50% {
170+
transform: scale(1.02);
171+
}
172+
}
173+
174+
footer {
175+
margin-top: 6rem;
176+
padding: 2rem;
177+
text-align: center;
178+
color: #606060;
179+
border-top: 1px solid rgba(255, 255, 255, 0.1);
180+
}
181+
182+
@media (max-width: 768px) {
183+
h1 {
184+
font-size: 2.5rem;
185+
}
186+
.tagline {
187+
font-size: 1.2rem;
188+
}
189+
.features {
190+
grid-template-columns: 1fr;
191+
}
192+
}
193+
</style>
194+
</head>
195+
<body>
196+
<div class="container">
197+
<header>
198+
<h1>QuantumGraph</h1>
199+
<p class="tagline">Universo de Soluções em Inteligência Artificial</p>
200+
<a href="#contact" class="cta-button">Explorar o Universo</a>
201+
</header>
202+
203+
<section class="features">
204+
<div class="feature-card">
205+
<h3>🤖 IA Avançada</h3>
206+
<p>Desenvolvemos soluções de inteligência artificial de ponta, incluindo redes neurais profundas, processamento de linguagem natural e visão computacional.</p>
207+
</div>
208+
209+
<div class="feature-card">
210+
<h3>📊 Análise de Dados</h3>
211+
<p>Transformamos dados brutos em insights valiosos através de análise preditiva, machine learning e visualizações interativas em tempo real.</p>
212+
</div>
213+
214+
<div class="feature-card">
215+
<h3>⚡ Automação Inteligente</h3>
216+
<p>Otimizamos processos empresariais com automação baseada em IA, reduzindo custos e aumentando eficiência operacional.</p>
217+
</div>
218+
219+
<div class="feature-card">
220+
<h3>🧬 Sistemas Agênticos</h3>
221+
<p>Criamos sistemas multi-agentes autônomos que trabalham em conjunto para resolver problemas complexos de forma distribuída.</p>
222+
</div>
223+
224+
<div class="feature-card">
225+
<h3>🔮 Computação Quântica</h3>
226+
<p>Exploramos o potencial da computação quântica para resolver problemas computacionalmente intensivos e otimização complexa.</p>
227+
</div>
228+
229+
<div class="feature-card">
230+
<h3>🌐 Grafos de Conhecimento</h3>
231+
<p>Construímos grafos de conhecimento interconectados que modelam relações complexas e permitem descoberta de padrões ocultos.</p>
232+
</div>
233+
</section>
234+
235+
<section class="tech-stack">
236+
<h2>Tecnologias</h2>
237+
<div class="tech-list">
238+
<span class="tech-item">TensorFlow</span>
239+
<span class="tech-item">PyTorch</span>
240+
<span class="tech-item">Scikit-learn</span>
241+
<span class="tech-item">React</span>
242+
<span class="tech-item">Next.js</span>
243+
<span class="tech-item">Three.js</span>
244+
<span class="tech-item">Node.js</span>
245+
<span class="tech-item">Python</span>
246+
<span class="tech-item">TypeScript</span>
247+
<span class="tech-item">GraphQL</span>
248+
<span class="tech-item">Docker</span>
249+
<span class="tech-item">Kubernetes</span>
250+
</div>
251+
</section>
252+
253+
<footer>
254+
<p>&copy; 2025 QuantumGraph. Todos os direitos reservados.</p>
255+
<p>Navegando pelo futuro da inteligência artificial</p>
256+
</footer>
257+
</div>
258+
259+
<script>
260+
// Add smooth scrolling
261+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
262+
anchor.addEventListener('click', function (e) {
263+
e.preventDefault();
264+
const target = document.querySelector(this.getAttribute('href'));
265+
if (target) {
266+
target.scrollIntoView({ behavior: 'smooth' });
267+
}
268+
});
269+
});
270+
271+
// Add intersection observer for animations
272+
const observer = new IntersectionObserver((entries) => {
273+
entries.forEach(entry => {
274+
if (entry.isIntersecting) {
275+
entry.target.style.opacity = '1';
276+
entry.target.style.transform = 'translateY(0)';
277+
}
278+
});
279+
}, { threshold: 0.1 });
280+
281+
document.querySelectorAll('.feature-card').forEach(card => {
282+
card.style.opacity = '0';
283+
card.style.transform = 'translateY(30px)';
284+
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
285+
observer.observe(card);
286+
});
287+
</script>
288+
</body>
289+
</html>

‎src/app/page-3d-backup.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
'use client';
2+
3+
import { motion } from 'framer-motion';
4+
import dynamic from 'next/dynamic';
5+
6+
7+
8+
9+
// IMPLEMENTAÇÃO DIRETA DO UNIVERSO 3D NA PÁGINA PRINCIPAL
10+
// Conforme documentação GitHub Pages - usar componente React Three Fiber
11+
12+
// Lazy load do componente 3D para evitar problemas de SSR
13+
const GraphUniverse = dynamic(() => import('../components/Graph3D/GraphUniverse'), {
14+
ssr: false,
15+
loading: () => (
16+
<div className="h-screen w-full bg-gradient-to-br from-gray-900 via-black to-blue-900 flex items-center justify-center">
17+
<div className="text-center">
18+
<motion.div
19+
animate={{ rotate: 360 }}
20+
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
21+
className="w-16 h-16 border-4 border-cyan-400 border-t-transparent rounded-full mx-auto mb-4"
22+
/>
23+
<h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400 mb-2">
24+
QuantumGraph
25+
</h2>
26+
<p className="text-gray-400">Inicializando universo 3D...</p>
27+
</div>
28+
</div>
29+
)
30+
});
31+
32+
export default function Home() {
33+
return (
34+
<div className="h-screen w-full overflow-hidden">
35+
<GraphUniverse />
36+
</div>
37+
);
38+
}
39+

0 commit comments

Comments
 (0)