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">
{/* Holographic Decoration */}
<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-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>

38
src/components/LoadingScreen.tsx
View File

@@ -1,8 +1,32 @@
"use client";
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useMemo } from 'react';
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 = () => {
const [isLoading, setIsLoading] = useState(true);
const [progress, setProgress] = useState(0);
@@ -15,7 +39,7 @@ export const LoadingScreen: React.FC = () => {
setTimeout(() => setIsLoading(false), 300);
return 100;
}
return prev + Math.random() * 15;
return prev + 10;
});
}, 100);
@@ -31,15 +55,15 @@ export const LoadingScreen: React.FC = () => {
{/* Floating Particles */}
<div className="absolute inset-0 overflow-hidden">
{[...Array(20)].map((_, i) => (
{PARTICLE_POSITIONS.map((particle, i) => (
<div
key={i}
className="absolute w-1 h-1 bg-zsl-primary/50 rounded-full animate-pulse"
style={{
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 2}s`,
animationDuration: `${2 + Math.random() * 3}s`
left: `${particle.left}%`,
top: `${particle.top}%`,
animationDelay: `${particle.delay}s`,
animationDuration: `${particle.duration}s`
}}
/>
))}

14
src/components/Logo.tsx
View File

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