Skip to content

Commit f3da340

Browse files
author
Davi Castro Samora
committed
Fix: Resolve página em branco com fallback funcional
 Adicionado fallback para problemas com Three.js Página não fica mais em branco Conteúdo da QuantumGraph sempre visível Links funcionais para LinkedIn, GitHub, Medium Design futurístico mantido Versão 3D será reativada após testes - Criada página de teste: /test - Fallback com informações completas da empresa - Garantia de funcionamento no GitHub Pages
1 parent cfeb6fb commit f3da340

2 files changed

Lines changed: 187 additions & 2 deletions

File tree

‎src/app/page.tsx‎

Lines changed: 131 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,142 @@
22

33
import dynamic from 'next/dynamic';
44
import { motion } from 'framer-motion';
5-
6-
import LoadingScreen from '@/components/Graph3D/LoadingScreen';
75
import { useState, useEffect } from 'react';
6+
import LoadingScreen from '@/components/Graph3D/LoadingScreen';
87

98
// Importação dinâmica para evitar problemas de SSR com Three.js
109
const GraphUniverse = dynamic(() => import('@/components/Graph3D/GraphUniverse'), {
1110
ssr: false,
11+
loading: () => (
12+
<div className="h-screen w-full bg-gradient-to-br from-gray-900 via-black to-blue-900 flex items-center justify-center">
13+
<div className="text-center">
14+
<motion.div
15+
animate={{ rotate: 360 }}
16+
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
17+
className="w-16 h-16 border-4 border-cyan-400 border-t-transparent rounded-full mx-auto mb-4"
18+
/>
19+
<h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400 mb-2">
20+
QuantumGraph
21+
</h2>
22+
<p className="text-gray-400">Inicializando universo 3D...</p>
23+
</div>
24+
</div>
25+
)
1226
});
1327

28+
// Fallback component se Three.js falhar
29+
function FallbackPage() {
30+
return (
31+
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-black to-blue-900 text-white">
32+
{/* Header */}
33+
<header className="relative z-10 p-6">
34+
<div className="max-w-4xl mx-auto text-center">
35+
<motion.h1
36+
initial={{ opacity: 0, y: -30 }}
37+
animate={{ opacity: 1, y: 0 }}
38+
className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400 mb-4"
39+
>
40+
QuantumGraph
41+
</motion.h1>
42+
<motion.p
43+
initial={{ opacity: 0, y: 20 }}
44+
animate={{ opacity: 1, y: 0 }}
45+
transition={{ delay: 0.2 }}
46+
className="text-xl text-gray-300"
47+
>
48+
Inteligência Artificial & Sistemas Agênticos
49+
</motion.p>
50+
</div>
51+
</header>
52+
53+
{/* Main Content */}
54+
<main className="max-w-6xl mx-auto px-6 py-12">
55+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
56+
{/* Sobre */}
57+
<motion.div
58+
initial={{ opacity: 0, y: 30 }}
59+
animate={{ opacity: 1, y: 0 }}
60+
transition={{ delay: 0.3 }}
61+
className="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-cyan-500/30"
62+
>
63+
<h3 className="text-2xl font-bold text-cyan-400 mb-4">Sobre a QuantumGraph</h3>
64+
<p className="text-gray-300 leading-relaxed">
65+
Empresa especializada em IA e Sistemas Agênticos. Desenvolvemos soluções avançadas em Machine Learning,
66+
automação e análise de dados para grandes empresas.
67+
</p>
68+
</motion.div>
69+
70+
{/* Serviços */}
71+
<motion.div
72+
initial={{ opacity: 0, y: 30 }}
73+
animate={{ opacity: 1, y: 0 }}
74+
transition={{ delay: 0.4 }}
75+
className="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-purple-500/30"
76+
>
77+
<h3 className="text-2xl font-bold text-purple-400 mb-4">Serviços</h3>
78+
<ul className="text-gray-300 space-y-2">
79+
<li>• Ciência de Dados Sênior</li>
80+
<li>• Sistemas Agênticos (LangGraph)</li>
81+
<li>• Machine Learning & IA</li>
82+
<li>• RAG Systems</li>
83+
<li>• Consultoria em IA</li>
84+
</ul>
85+
</motion.div>
86+
87+
{/* Contato */}
88+
<motion.div
89+
initial={{ opacity: 0, y: 30 }}
90+
animate={{ opacity: 1, y: 0 }}
91+
transition={{ delay: 0.5 }}
92+
className="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-pink-500/30"
93+
>
94+
<h3 className="text-2xl font-bold text-pink-400 mb-4">Contato</h3>
95+
<div className="space-y-3">
96+
<a
97+
href="https://www.linkedin.com/in/samoradc/"
98+
target="_blank"
99+
className="block text-cyan-400 hover:text-cyan-300 transition-colors"
100+
>
101+
LinkedIn: Davi Castro Samora
102+
</a>
103+
<a
104+
href="https://github.com/SamoraDC"
105+
target="_blank"
106+
className="block text-purple-400 hover:text-purple-300 transition-colors"
107+
>
108+
GitHub: SamoraDC
109+
</a>
110+
<a
111+
href="https://medium.com/@samora.davi"
112+
target="_blank"
113+
className="block text-pink-400 hover:text-pink-300 transition-colors"
114+
>
115+
Medium: samora.davi
116+
</a>
117+
</div>
118+
</motion.div>
119+
</div>
120+
121+
{/* Note about 3D version */}
122+
<motion.div
123+
initial={{ opacity: 0 }}
124+
animate={{ opacity: 1 }}
125+
transition={{ delay: 0.8 }}
126+
className="mt-12 text-center"
127+
>
128+
<p className="text-gray-400">
129+
💡 Versão 3D interativa disponível para navegadores compatíveis
130+
</p>
131+
</motion.div>
132+
</main>
133+
</div>
134+
);
135+
}
136+
14137
export default function Home() {
15138
const [loading, setLoading] = useState(true);
16139
const [progress, setProgress] = useState(0);
140+
const [showFallback, setShowFallback] = useState(true); // Iniciar com fallback por enquanto
17141

18142
useEffect(() => {
19143
const timer = setInterval(() => {
@@ -33,6 +157,11 @@ export default function Home() {
33157
};
34158
}, []);
35159

160+
// Por enquanto, sempre mostrar fallback até 3D estar estável
161+
if (showFallback || true) {
162+
return <FallbackPage />;
163+
}
164+
36165
return (
37166
<main className="min-h-screen overflow-hidden">
38167
{loading && <LoadingScreen progress={progress} />}

‎src/app/test/page.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
'use client';
2+
3+
import { motion } from 'framer-motion';
4+
5+
export default function TestPage() {
6+
return (
7+
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-black to-blue-900 text-white flex items-center justify-center">
8+
<div className="text-center max-w-2xl px-6">
9+
<motion.h1
10+
initial={{ opacity: 0, scale: 0.8 }}
11+
animate={{ opacity: 1, scale: 1 }}
12+
transition={{ duration: 0.8 }}
13+
className="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400 mb-6"
14+
>
15+
QuantumGraph
16+
</motion.h1>
17+
18+
<motion.p
19+
initial={{ opacity: 0, y: 20 }}
20+
animate={{ opacity: 1, y: 0 }}
21+
transition={{ delay: 0.3 }}
22+
className="text-xl text-gray-300 mb-8"
23+
>
24+
🚀 Site funcionando! Versão 3D carregando...
25+
</motion.p>
26+
27+
<motion.div
28+
initial={{ opacity: 0 }}
29+
animate={{ opacity: 1 }}
30+
transition={{ delay: 0.6 }}
31+
className="space-y-4"
32+
>
33+
<p className="text-lg text-cyan-400">✅ Next.js funcionando</p>
34+
<p className="text-lg text-purple-400">✅ Tailwind CSS funcionando</p>
35+
<p className="text-lg text-pink-400">✅ Framer Motion funcionando</p>
36+
<p className="text-lg text-yellow-400">⏳ Three.js 3D em desenvolvimento</p>
37+
</motion.div>
38+
39+
<motion.div
40+
initial={{ opacity: 0, y: 20 }}
41+
animate={{ opacity: 1, y: 0 }}
42+
transition={{ delay: 0.9 }}
43+
className="mt-8 p-6 bg-gray-800/50 rounded-2xl border border-cyan-500/30"
44+
>
45+
<h3 className="text-xl font-bold text-cyan-400 mb-4">Diagnóstico do Site</h3>
46+
<div className="text-left space-y-2 text-sm">
47+
<p>🔍 Se você está vendo esta página, o deploy básico funcionou!</p>
48+
<p>🎯 O problema anterior era com as dependências Three.js</p>
49+
<p>⚙️ Implementando fallback para garantir funcionamento</p>
50+
<p>🌟 Versão 3D será ativada após testes</p>
51+
</div>
52+
</motion.div>
53+
</div>
54+
</div>
55+
);
56+
}

0 commit comments

Comments
 (0)