agartha/New-folder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gitea

Browse Source
This commit is contained in:
Şahan Hasret
2025-12-14 00:17:58 +03:00
parent 174f49f921
commit 2ebc63ac6a
3 changed files with 47 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/page.tsx
View File

@@ -249,10 +249,16 @@ export default function Home() {
<div className="order-1 md:order-2 flex justify-center relative"> <div className="order-1 md:order-2 flex justify-center relative">
{/* Holographic Decoration */} {/* Holographic Decoration */}
<div className="absolute inset-0 bg-zsl-primary/5 rounded-full blur-[100px] animate-pulse-slow"></div> <div className="absolute inset-0 bg-zsl-primary/5 rounded-full blur-[100px] animate-pulse-slow"></div>
<div className="relative w-80 h-80 rounded-full border-2 border-dashed border-zsl-primary/30 flex items-center justify-center bg-black/40 backdrop-blur-sm"> <div className="relative w-96 h-96 rounded-full border-2 border-dashed border-zsl-primary/30 flex items-center justify-center bg-black/40 backdrop-blur-sm">
<div className="absolute inset-0 border border-zsl-primary/10 rounded-full animate-[spin_20s_linear_infinite]"></div> <div className="absolute inset-0 border border-zsl-primary/10 rounded-full animate-[spin_20s_linear_infinite]"></div>
<div className="absolute inset-4 border border-zsl-accent/10 rounded-full animate-[spin_15s_linear_infinite_reverse]"></div> <div className="absolute inset-4 border border-zsl-accent/10 rounded-full animate-[spin_15s_linear_infinite_reverse]"></div>
<Logo size="lg" /> <div className="w-72 h-72 rounded-full overflow-hidden border-2 border-zsl-primary/30 shadow-[0_0_30px_rgba(0,212,255,0.3)]">
<img
src="/assets/logo.png"
alt="ZeroSixLab"
className="w-full h-full object-cover"
/>
</div>
</div> </div>
</div> </div>
</div> </div>

38
src/components/LoadingScreen.tsx
View File

@@ -1,8 +1,32 @@
"use client"; "use client";
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState, useMemo } from 'react';
import { Logo } from './Logo'; import { Logo } from './Logo';
// Fixed particle positions to avoid hydration mismatch
const PARTICLE_POSITIONS = [
{ left: 10, top: 15, delay: 0.2, duration: 3 },
{ left: 25, top: 80, delay: 0.5, duration: 4 },
{ left: 45, top: 30, delay: 0.8, duration: 3.5 },
{ left: 70, top: 60, delay: 1.1, duration: 4.5 },
{ left: 85, top: 20, delay: 1.4, duration: 3 },
{ left: 15, top: 50, delay: 0.3, duration: 4 },
{ left: 55, top: 85, delay: 0.6, duration: 3.5 },
{ left: 90, top: 45, delay: 0.9, duration: 4 },
{ left: 35, top: 70, delay: 1.2, duration: 3 },
{ left: 60, top: 10, delay: 1.5, duration: 4.5 },
{ left: 5, top: 90, delay: 0.4, duration: 3.5 },
{ left: 50, top: 55, delay: 0.7, duration: 4 },
{ left: 75, top: 35, delay: 1.0, duration: 3 },
{ left: 20, top: 25, delay: 1.3, duration: 4.5 },
{ left: 40, top: 95, delay: 1.6, duration: 3.5 },
{ left: 95, top: 75, delay: 0.1, duration: 4 },
{ left: 30, top: 5, delay: 1.8, duration: 3 },
{ left: 65, top: 40, delay: 0.25, duration: 4.5 },
{ left: 80, top: 65, delay: 1.7, duration: 3.5 },
{ left: 12, top: 88, delay: 1.9, duration: 4 },
];
export const LoadingScreen: React.FC = () => { export const LoadingScreen: React.FC = () => {
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
@@ -15,7 +39,7 @@ export const LoadingScreen: React.FC = () => {
setTimeout(() => setIsLoading(false), 300); setTimeout(() => setIsLoading(false), 300);
return 100; return 100;
} }
return prev + Math.random() * 15; return prev + 10;
}); });
}, 100); }, 100);
@@ -31,15 +55,15 @@ export const LoadingScreen: React.FC = () => {
{/* Floating Particles */} {/* Floating Particles */}
<div className="absolute inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden">
{[...Array(20)].map((_, i) => ( {PARTICLE_POSITIONS.map((particle, i) => (
<div <div
key={i} key={i}
className="absolute w-1 h-1 bg-zsl-primary/50 rounded-full animate-pulse" className="absolute w-1 h-1 bg-zsl-primary/50 rounded-full animate-pulse"
style={{ style={{
left: `${Math.random() * 100}%`, left: `${particle.left}%`,
top: `${Math.random() * 100}%`, top: `${particle.top}%`,
animationDelay: `${Math.random() * 2}s`, animationDelay: `${particle.delay}s`,
animationDuration: `${2 + Math.random() * 3}s` animationDuration: `${particle.duration}s`
}} }}
/> />
))} ))}

14
src/components/Logo.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
export const Logo: React.FC<{ size?: 'sm' | 'md' | 'lg' }> = ({ size = 'md' }) => { export const Logo: React.FC<{ size?: 'sm' | 'md' | 'lg', showText?: boolean }> = ({ size = 'md', showText = true }) => {
const [imageError, setImageError] = useState(false); const [imageError, setImageError] = useState(false);
const sizeClasses = { const sizeClasses = {
@@ -36,11 +36,13 @@ export const Logo: React.FC<{ size?: 'sm' | 'md' | 'lg' }> = ({ size = 'md' }) =
</div> </div>
)} )}
</div> </div>
<div className={`font-mono font-bold tracking-wider ${textSizes[size]}`}> {showText && (
<span className="text-white">Zero</span> <div className={`font-mono font-bold tracking-wider ${textSizes[size]}`}>
<span className="text-zsl-primary">Six</span> <span className="text-white">Zero</span>
<span className="text-white">Lab</span> <span className="text-zsl-primary">Six</span>
</div> <span className="text-white">Lab</span>
</div>
)}
</div> </div>
); );
}; };