Skip to content

Commit feebb4b

Browse files
Ani1702Ani1702
committed
feat: add preloader, timeline, seperate page for dashboard & some minor adjustments
1 parent 24e8023 commit feebb4b

File tree

19 files changed

+1464
-404
lines changed

19 files changed

+1464
-404
lines changed

‎app/dashboard/page.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
"use client";
2+
3+
import { useEffect, useState } from "react";
4+
import { useRouter } from "next/navigation";
5+
import { supabase } from "@/lib/supabase";
6+
import Navbar from "@/components/Navbar";
7+
import DashboardSection from "@/components/DashboardSection";
8+
import Footer from "@/components/Footer";
9+
10+
export default function DashboardPage() {
11+
const [user, setUser] = useState<any>(null);
12+
const [isLoggedIn, setIsLoggedIn] = useState(false);
13+
const [isLoading, setIsLoading] = useState(true);
14+
const router = useRouter();
15+
16+
useEffect(() => {
17+
supabase.auth.getSession().then(({ data }) => {
18+
if (!data.session) {
19+
router.push("/");
20+
} else {
21+
setIsLoggedIn(true);
22+
setUser(data.session.user);
23+
}
24+
setIsLoading(false);
25+
});
26+
27+
const { data: listener } = supabase.auth.onAuthStateChange(
28+
(_event, session) => {
29+
if (!session) {
30+
router.push("/");
31+
} else {
32+
setIsLoggedIn(true);
33+
setUser(session.user);
34+
}
35+
}
36+
);
37+
38+
return () => listener.subscription.unsubscribe();
39+
}, [router]);
40+
41+
if (isLoading) {
42+
return <div className="min-h-screen bg-black flex items-center justify-center text-white">Loading...</div>;
43+
}
44+
45+
if (!isLoggedIn) {
46+
return null;
47+
}
48+
49+
return (
50+
<>
51+
<Navbar isLoggedIn={true} />
52+
<main className="h-screen w-full overflow-hidden relative">
53+
<DashboardSection user={user} />
54+
</main>
55+
56+
</>
57+
);
58+
}

‎app/page.tsx‎

Lines changed: 53 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import { useEffect, useState } from "react";
44
import { supabase } from "../lib/supabase";
55

66
import Navbar from "../components/Navbar";
7-
import DashboardSection from "../components/DashboardSection";
7+
import Preloader from "../components/Preloader";
8+
import ScrollReveal from "../components/ScrollReveal";
9+
810
import TimelineSection from "../components/TimelineSection";
911
import FAQSection from "../components/FaqSection";
1012
import Footer from "../components/Footer";
@@ -31,46 +33,78 @@ export default function LandingPage() {
3133
<>
3234
<Navbar isLoggedIn={isLoggedIn} />
3335

36+
<Preloader />
37+
3438
{/* IMPORTANT: no h-screen, no overflow */}
3539
<main className="scroll-smooth">
3640
<section
3741
id="home"
38-
className="min-h-screen px-12 pt-28 flex items-center"
42+
className="min-h-screen px-6 md:px-12 flex flex-col items-center justify-center relative overflow-hidden"
3943
>
40-
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 w-full max-w-7xl mx-auto">
41-
44+
{/* Subtle radial gradient background accent */}
45+
<div className="absolute inset-0 pointer-events-none">
46+
<div className="absolute top-1/2 left-1/4 w-[400px] h-[400px] bg-[#CCFF00]/3 rounded-full blur-[120px] -translate-y-1/2" />
47+
<div className="absolute top-1/3 right-1/4 w-[300px] h-[300px] bg-purple-500/5 rounded-full blur-[100px]" />
48+
</div>
49+
50+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-7xl mx-auto items-center relative z-10">
51+
4252
{/* LEFT TEXT */}
43-
<div>
44-
<div className="text-4xl font-bold text-white">ModelArena</div>
45-
<h1 className="text-6xl md:text-8xl lg:text-7xl font-extrabold tracking-tight leading-tight mt-4">
46-
Your Model,
53+
<ScrollReveal className="w-full flex flex-col items-start">
54+
55+
{/* Main headline with text shadow for depth */}
56+
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black tracking-wide leading-[1.3] uppercase">
57+
<span className="text-white">YOUR </span>
58+
<span className="text-[#CCFF00] drop-shadow-[0_0_15px_rgba(204,255,0,0.2)]">MODEL,</span>
4759
<br />
48-
<span className="text-[#CCFF00]">Our Arena.</span>
60+
<span className="text-white">OUR </span>
61+
<span className="text-[#CCFF00] drop-shadow-[0_0_15px_rgba(204,255,0,0.2)]">ARENA.</span>
4962
</h1>
50-
</div>
63+
64+
{/* Subtle tagline */}
65+
<p className="mt-6 text-white/50 text-sm md:text-base tracking-wide max-w-md">
66+
Compete. Train. Deploy. The ultimate battleground for AI models.
67+
</p>
68+
69+
{/* Enhanced CTA button */}
70+
<button
71+
onClick={() => {
72+
if (isLoggedIn) {
73+
window.location.href = "/dashboard";
74+
} else {
75+
supabase.auth.signInWithOAuth({
76+
provider: "google",
77+
options: { redirectTo: location.origin },
78+
});
79+
}
80+
}}
81+
className="mt-8 bg-[#CCFF00] px-6 py-2.5 text-sm font-bold tracking-widest text-black uppercase transition-all duration-200 shadow-[4px_4px_0px_0px_rgba(255,255,255,0.9)] hover:shadow-none hover:translate-x-[4px] hover:translate-y-[4px]"
82+
>
83+
{isLoggedIn ? "DASHBOARD" : "REGISTER NOW"}
84+
</button>
85+
</ScrollReveal>
5186

5287
{/* RIGHT 3D */}
53-
<div className="h-[420px] md:h-[520px]">
88+
<div className="h-[350px] md:h-[480px] lg:h-[550px] relative">
5489
<Hero3D />
5590
</div>
5691
</div>
5792
</section>
5893

59-
{/* DASHBOARD */}
60-
{isLoggedIn && (
61-
<section id="dashboard">
62-
<DashboardSection />
63-
</section>
64-
)}
94+
6595

6696
{/* TIMELINE */}
6797
<section id="timeline">
68-
<TimelineSection />
98+
<ScrollReveal>
99+
<TimelineSection />
100+
</ScrollReveal>
69101
</section>
70102

71103
{/* FAQ */}
72104
<section id="faq">
73-
<FAQSection />
105+
<ScrollReveal>
106+
<FAQSection />
107+
</ScrollReveal>
74108
</section>
75109

76110
<Footer />

‎app/test/page.tsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
'use client';
2+
3+
import React, { useRef, useMemo } from 'react';
4+
import { Canvas, useFrame } from '@react-three/fiber';
5+
import { OrbitControls, Stars, PerspectiveCamera } from '@react-three/drei';
6+
import { EffectComposer, Bloom } from '@react-three/postprocessing';
7+
// FIX: Import namespace to avoid 'no exported member' errors
8+
import * as THREE from 'three';
9+
10+
// --- 1. Custom Shader for the Gradient Wireframe ---
11+
const vertexShader = `
12+
varying vec3 vPos;
13+
void main() {
14+
vPos = position;
15+
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
16+
}
17+
`;
18+
19+
const fragmentShader = `
20+
varying vec3 vPos;
21+
uniform vec3 colorA;
22+
uniform vec3 colorB;
23+
24+
void main() {
25+
float mixValue = (vPos.x + vPos.y * 0.5) * 0.5 + 0.5;
26+
mixValue = clamp(mixValue, 0.0, 1.0);
27+
vec3 finalColor = mix(colorA, colorB, mixValue);
28+
gl_FragColor = vec4(finalColor, 1.0);
29+
}
30+
`;
31+
32+
// --- 2. The Main Geometric Structure ---
33+
const GlowingIcosahedron = () => {
34+
// FIX: Use 'Group' type directly
35+
const meshRef = useRef<THREE.Group>(null);
36+
37+
useFrame((state, delta) => {
38+
if (meshRef.current) {
39+
meshRef.current.rotation.y += delta * 0.1;
40+
meshRef.current.rotation.x += delta * 0.05;
41+
}
42+
});
43+
44+
// FIX: Use 'Color' directly
45+
const colorA = useMemo(() => new THREE.Color('#d946ef'), []);
46+
const colorB = useMemo(() => new THREE.Color('#bef264'), []);
47+
48+
// FIX: Use 'IcosahedronGeometry' directly
49+
const geometry = useMemo(() => new THREE.IcosahedronGeometry(2, 0), []);
50+
51+
return (
52+
<group ref={meshRef}>
53+
<lineSegments>
54+
<wireframeGeometry args={[geometry]} />
55+
<shaderMaterial
56+
vertexShader={vertexShader}
57+
fragmentShader={fragmentShader}
58+
uniforms={{
59+
colorA: { value: colorA },
60+
colorB: { value: colorB },
61+
}}
62+
transparent
63+
depthTest={false}
64+
opacity={1}
65+
/>
66+
</lineSegments>
67+
68+
<points>
69+
<bufferGeometry attach="geometry" {...geometry} />
70+
<pointsMaterial
71+
size={0.15}
72+
color="#ffffff"
73+
transparent
74+
opacity={0.9}
75+
sizeAttenuation={true}
76+
/>
77+
</points>
78+
79+
<mesh geometry={geometry}>
80+
<meshBasicMaterial
81+
color="#000000"
82+
transparent
83+
opacity={0.1}
84+
wireframe={false}
85+
/>
86+
</mesh>
87+
</group>
88+
);
89+
};
90+
91+
// --- 3. The Main Page Component ---
92+
export default function SacredGeometryPage() {
93+
return (
94+
<div className="w-full h-screen bg-black overflow-hidden relative">
95+
<Canvas dpr={[1, 2]}>
96+
<PerspectiveCamera makeDefault position={[0, 0, 6]} fov={50} />
97+
<OrbitControls enableZoom={false} autoRotate autoRotateSpeed={0.5} />
98+
99+
<GlowingIcosahedron />
100+
101+
<Stars
102+
radius={100}
103+
depth={50}
104+
count={5000}
105+
factor={4}
106+
saturation={0}
107+
fade
108+
speed={1}
109+
/>
110+
111+
{/* FIX: enableNormalPass={false} handles the type error from before */}
112+
<EffectComposer enableNormalPass={false}>
113+
<Bloom
114+
luminanceThreshold={0}
115+
mipmapBlur
116+
intensity={1.5}
117+
radius={0.6}
118+
/>
119+
</EffectComposer>
120+
</Canvas>
121+
122+
<div className="absolute bottom-10 left-0 w-full text-center pointer-events-none">
123+
<p className="text-white/30 text-xs tracking-[0.5em] font-light uppercase font-mono">
124+
System Initialized
125+
</p>
126+
</div>
127+
</div>
128+
);
129+
}

0 commit comments

Comments
 (0)