chore:preloader change
This commit is contained in:
Ashwani Senapati
@@ -1,641 +1,3 @@
|
||||
// "use client";
|
||||
// import { Canvas } from "@react-three/fiber";
|
||||
// import { OrbitControls } from "@react-three/drei";
|
||||
// import { EffectComposer, Bloom } from "@react-three/postprocessing";
|
||||
// import * as THREE from "three";
|
||||
|
||||
// function AISphere() {
|
||||
// return (
|
||||
// <mesh>
|
||||
// {/* AI Core Sphere */}
|
||||
// <sphereGeometry args={[1.2, 64, 64]} />
|
||||
// <meshStandardMaterial
|
||||
// color="#00f5d4"
|
||||
// emissive="#00f5d4"
|
||||
// emissiveIntensity={0.6}
|
||||
// roughness={0.2}
|
||||
// metalness={0.8}
|
||||
// />
|
||||
|
||||
// {/* Wireframe overlay */}
|
||||
// <lineSegments>
|
||||
// <wireframeGeometry attach="geometry" args={[new THREE.SphereGeometry(1.21, 32, 32)]} />
|
||||
// <lineBasicMaterial color="#0ff" linewidth={1} />
|
||||
// </lineSegments>
|
||||
// </mesh>
|
||||
// );
|
||||
// }
|
||||
|
||||
// export default function Hero3D() {
|
||||
// return (
|
||||
// <div className="w-full h-screen bg-black">
|
||||
// <Canvas camera={{ position: [0, 0, 5], fov: 60 }}>
|
||||
// <ambientLight intensity={0.3} />
|
||||
// <pointLight position={[5, 5, 5]} intensity={2} color="#00f5d4" />
|
||||
|
||||
// {/* The futuristic AI sphere */}
|
||||
// <AISphere />
|
||||
|
||||
// {/* Glow effects */}
|
||||
// <EffectComposer>
|
||||
// <Bloom intensity={1.2} luminanceThreshold={0.2} />
|
||||
// </EffectComposer>
|
||||
|
||||
// <OrbitControls enableZoom={false} autoRotate autoRotateSpeed={1.5} />
|
||||
// </Canvas>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// import { Canvas } from "@react-three/fiber";
|
||||
// import { OrbitControls } from "@react-three/drei";
|
||||
// import { Sphere, Line } from "@react-three/drei";
|
||||
// import { useRef } from "react";
|
||||
// import { useFrame } from "@react-three/fiber";
|
||||
// import { EffectComposer, Bloom } from "@react-three/postprocessing";
|
||||
// import { motion } from "framer-motion";
|
||||
// import { ReactTyped } from "react-typed";
|
||||
// import Navbar from "./Navbar";
|
||||
// const Glow = ({ className = "" }) => (
|
||||
// <div
|
||||
// className={`pointer-events-none absolute inset-0 -z-10 opacity-60 blur-2xl
|
||||
// [background:radial-gradient(60%_60%_at_20%_0%,rgba(0,255,255,.15),transparent_60%),radial-gradient(50%_50%_at_90%_20%,rgba(0,255,200,.12),transparent_60%),radial-gradient(40%_40%_at_50%_120%,rgba(0,200,255,.1),transparent_60%)] ${className}`}
|
||||
// />
|
||||
// );
|
||||
// function AnimatedNeuralNode({ position, color, size = 0.08 }) {
|
||||
// const ref = useRef();
|
||||
|
||||
// useFrame((state) => {
|
||||
// if (ref.current) {
|
||||
// // Subtle pulsing animation
|
||||
// ref.current.scale.x = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
|
||||
// ref.current.scale.y = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
|
||||
// ref.current.scale.z = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
|
||||
// }
|
||||
// });
|
||||
|
||||
// return (
|
||||
// <Sphere ref={ref} args={[size, 64, 64]} position={position}>
|
||||
// <meshStandardMaterial
|
||||
// color={color}
|
||||
// emissive={color}
|
||||
// emissiveIntensity={2} // boost emissive
|
||||
// toneMapped={false} // important for bright bloom
|
||||
// />
|
||||
// </Sphere>
|
||||
// );
|
||||
// }
|
||||
|
||||
// function NeuralStructure({
|
||||
// position = [0, 0, 0],
|
||||
// color = "#00faff",
|
||||
// nodeCount = 8,
|
||||
// }) {
|
||||
// const nodes = useRef([]);
|
||||
|
||||
// if (nodes.current.length === 0) {
|
||||
// for (let i = 0; i < nodeCount; i++) {
|
||||
// nodes.current.push([
|
||||
// (Math.random() - 0.5) * 3,
|
||||
// (Math.random() - 0.5) * 3,
|
||||
// (Math.random() - 0.5) * 3,
|
||||
// ]);
|
||||
// }
|
||||
// }
|
||||
|
||||
// const connections = [];
|
||||
// for (let i = 0; i < nodeCount; i++) {
|
||||
// const connectionCount = 2 + Math.floor(Math.random() * 2);
|
||||
// const connectedIndices = new Set();
|
||||
|
||||
// while (connectedIndices.size < connectionCount) {
|
||||
// const targetIndex = Math.floor(Math.random() * nodeCount);
|
||||
// if (targetIndex !== i) {
|
||||
// connectedIndices.add(targetIndex);
|
||||
// }
|
||||
// }
|
||||
|
||||
// connectedIndices.forEach((targetIndex) => {
|
||||
// connections.push([i, targetIndex]);
|
||||
// });
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <group position={position}>
|
||||
// {nodes.current.map((pos, i) => (
|
||||
// <AnimatedNeuralNode key={i} position={pos} color={color} />
|
||||
// ))}
|
||||
|
||||
// {connections.map(([start, end], i) => (
|
||||
// <Line
|
||||
// key={i}
|
||||
// points={[nodes.current[start], nodes.current[end]]}
|
||||
// color={color}
|
||||
// lineWidth={1}
|
||||
// transparent
|
||||
// opacity={0.6}
|
||||
// toneMapped={false} // allow bloom on lines too
|
||||
// />
|
||||
// ))}
|
||||
// </group>
|
||||
// );
|
||||
// }
|
||||
|
||||
// export default function Home() {
|
||||
// const structures = [];
|
||||
// const colors = [
|
||||
// "#00faff",
|
||||
// "#00d9ff",
|
||||
// "#00bfff",
|
||||
// "#1e90ff",
|
||||
// "#007fff",
|
||||
// "#4dffff",
|
||||
// ];
|
||||
|
||||
// for (let i = 0; i < 12; i++) {
|
||||
// structures.push({
|
||||
// position: [
|
||||
// (Math.random() - 0.5) * 15,
|
||||
// (Math.random() - 0.5) * 15,
|
||||
// (Math.random() - 0.5) * 15,
|
||||
// ],
|
||||
// color: colors[i % colors.length],
|
||||
// nodeCount: 5 + Math.floor(Math.random() * 6),
|
||||
// });
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <div className="w-screen h-screen border-t border-cyan-500/20
|
||||
// bg-[#0b1117]">
|
||||
// <Navbar/>
|
||||
// <div className="absolute inset-0 flex md:left-10 items-center justify-center z-10 pointer-events-none">
|
||||
// <Glow />
|
||||
// <motion.div
|
||||
// initial={{ opacity: 0, scale: 0.9 }}
|
||||
// animate={{ opacity: 1, scale: 1 }}
|
||||
// transition={{ duration: 1, ease: "easeOut" }}
|
||||
// className="px-8 py-6 rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 shadow-lg text-center pointer-events-auto"
|
||||
// >
|
||||
// <motion.h1
|
||||
// initial={{ opacity: 0, y: -20 }}
|
||||
// animate={{ opacity: 1, y: 0 }}
|
||||
// transition={{ duration: 1, ease: "easeOut" }}
|
||||
// className="text-4xl md:text-8xl font-bold text-cyan-200 drop-shadow-[0_0_15px_#00faff] special-font"
|
||||
// // style={{ fontFamily: "Roboto, sans-serif" }}
|
||||
// >
|
||||
// <b>MACHINE LEARNING FOR EVERYONE</b> (<b>ML4E</b>)
|
||||
// </motion.h1>
|
||||
|
||||
// <motion.p
|
||||
// initial={{ opacity: 0, y: 20 }}
|
||||
// animate={{ opacity: 1, y: 0 }}
|
||||
// transition={{ delay: 0.5, duration: 1, ease: "easeOut" }}
|
||||
// className="mt-2 text-lg md:text-2xl text-blue-300 drop-shadow-[0_0_10px_#00d9ff]"
|
||||
// style={{ fontFamily: "Roboto, sans-serif" }}
|
||||
// >
|
||||
// <ReactTyped
|
||||
// strings={["THE OFFICIAL MACHINE LEARNING CLUB OF NIT ROURKELA"]}
|
||||
// typeSpeed={50}
|
||||
// backSpeed={30}
|
||||
// backDelay={1500}
|
||||
// loop={false}
|
||||
// showCursor={true}
|
||||
// />
|
||||
// </motion.p>
|
||||
// </motion.div>
|
||||
// </div>
|
||||
|
||||
// <Canvas camera={{ position: [0, 0, 10], fov: 30 }}>
|
||||
// <color attach="background" args={["#000000"]} />
|
||||
// <ambientLight intensity={0.3} />
|
||||
// <pointLight position={[10, 10, 10]} intensity={2} />
|
||||
|
||||
// {structures.map((props, i) => (
|
||||
// <NeuralStructure key={i} {...props} />
|
||||
// ))}
|
||||
|
||||
// <OrbitControls
|
||||
// enableZoom={true}
|
||||
// autoRotate
|
||||
// autoRotateSpeed={1.5} // adjust speed (default = 2.0)
|
||||
// enablePan={false}
|
||||
// enableRotate={window.innerWidth > 768}
|
||||
// touches={{
|
||||
// ONE: null,
|
||||
// TWO: null
|
||||
// }}
|
||||
// />
|
||||
|
||||
// {/* 🌟 Bloom Effect for neon glow */}
|
||||
// <EffectComposer>
|
||||
// <Bloom
|
||||
// intensity={2.5} // strength of glow
|
||||
// kernelSize={3} // blur size
|
||||
// luminanceThreshold={0.1} // what gets bloomed
|
||||
// luminanceSmoothing={0.9}
|
||||
// />
|
||||
// </EffectComposer>
|
||||
// </Canvas>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// import { Canvas } from "@react-three/fiber";
|
||||
// import { OrbitControls } from "@react-three/drei";
|
||||
// import { Sphere, Line } from "@react-three/drei";
|
||||
// import { useRef, useMemo } from "react";
|
||||
// import { useFrame } from "@react-three/fiber";
|
||||
// import { EffectComposer, Bloom } from "@react-three/postprocessing";
|
||||
// import { motion } from "framer-motion";
|
||||
// import Navbar from "./Navbar";
|
||||
|
||||
// const Glow = ({ className = "" }) => (
|
||||
// <div
|
||||
// className={`pointer-events-none absolute inset-0 -z-10 opacity-60 blur-2xl
|
||||
// [background:radial-gradient(60%_60%_at_20%_0%,rgba(0,255,255,.15),transparent_60%),radial-gradient(50%_50%_at_90%_20%,rgba(0,255,200,.12),transparent_60%),radial-gradient(40%_40%_at_50%_120%,rgba(0,200,255,.1),transparent_60%)] ${className}`}
|
||||
// />
|
||||
// );
|
||||
|
||||
// // Navbar placeholder
|
||||
|
||||
|
||||
// function AnimatedNeuralNode({ position, color, size = 0.08, delay = 0 }) {
|
||||
// const ref = useRef();
|
||||
|
||||
// useFrame((state) => {
|
||||
// if (ref.current) {
|
||||
// // Subtle pulsing animation with individual delay
|
||||
// const time = state.clock.elapsedTime + delay;
|
||||
// ref.current.scale.x = 1 + Math.sin(time * 2) * 0.15;
|
||||
// ref.current.scale.y = 1 + Math.sin(time * 2) * 0.15;
|
||||
// ref.current.scale.z = 1 + Math.sin(time * 2) * 0.15;
|
||||
// }
|
||||
// });
|
||||
|
||||
// return (
|
||||
// <Sphere ref={ref} args={[size, 32, 32]} position={position}>
|
||||
// <meshStandardMaterial
|
||||
// color={color}
|
||||
// emissive={color}
|
||||
// emissiveIntensity={2}
|
||||
// toneMapped={false}
|
||||
// />
|
||||
// </Sphere>
|
||||
// );
|
||||
// }
|
||||
// // Add this component after the imports
|
||||
// function ElectricCircuitBackground() {
|
||||
// return (
|
||||
// <group position={[0, 0, -10]}>
|
||||
// {/* Main circuit grid */}
|
||||
// <gridHelper
|
||||
// args={[50, 100, '#00faff', '#00a8ff']}
|
||||
// rotation={[0, 0, Math.PI / 4]}
|
||||
// />
|
||||
|
||||
// {/* Floating circuit lines */}
|
||||
// {Array.from({ length: 20 }).map((_, i) => {
|
||||
// const x = (Math.random() - 0.5) * 40;
|
||||
// const y = (Math.random() - 0.5) * 40;
|
||||
// const length = 3 + Math.random() * 5;
|
||||
|
||||
// return (
|
||||
// <Line
|
||||
// key={i}
|
||||
// points={[
|
||||
// [x, y, 0],
|
||||
// [x + length, y + (Math.random() - 0.5) * 2, 0]
|
||||
// ]}
|
||||
// color="#00faff"
|
||||
// lineWidth={0.5}
|
||||
// transparent
|
||||
// opacity={0.3 + Math.random() * 0.3}
|
||||
// />
|
||||
// );
|
||||
// })}
|
||||
|
||||
// {/* Circuit nodes */}
|
||||
// {Array.from({ length: 30 }).map((_, i) => (
|
||||
// <Sphere
|
||||
// key={`node-${i}`}
|
||||
// args={[0.05, 16, 16]}
|
||||
// position={[
|
||||
// (Math.random() - 0.5) * 40,
|
||||
// (Math.random() - 0.5) * 40,
|
||||
// 0
|
||||
// ]}
|
||||
// >
|
||||
// <meshBasicMaterial color="#00faff" toneMapped={false} />
|
||||
// </Sphere>
|
||||
// ))}
|
||||
// </group>
|
||||
// );
|
||||
// }
|
||||
// function NeuralStructure({
|
||||
// position = [0, 0, 0],
|
||||
// color = "#00faff",
|
||||
// structureIndex = 0,
|
||||
// }) {
|
||||
// // Generate fixed node positions based on structure index
|
||||
// const nodes = useMemo(() => {
|
||||
// const nodePositions = [];
|
||||
// const nodeCount = 12;
|
||||
// const radius = 1.2;
|
||||
|
||||
// // Create a spherical distribution of nodes
|
||||
// for (let i = 0; i < nodeCount; i++) {
|
||||
// const phi = Math.acos(-1 + (2 * i) / nodeCount);
|
||||
// const theta = Math.sqrt(nodeCount * Math.PI) * phi + structureIndex;
|
||||
|
||||
// nodePositions.push([
|
||||
// radius * Math.cos(theta) * Math.sin(phi),
|
||||
// radius * Math.sin(theta) * Math.sin(phi),
|
||||
// radius * Math.cos(phi),
|
||||
// ]);
|
||||
// }
|
||||
// return nodePositions;
|
||||
// }, [structureIndex]);
|
||||
|
||||
// // Generate fixed connections
|
||||
// const connections = useMemo(() => {
|
||||
// const conns = [];
|
||||
// const nodeCount = nodes.length;
|
||||
|
||||
// for (let i = 0; i < nodeCount; i++) {
|
||||
// // Connect to nearest neighbors
|
||||
// const distances = nodes.map((node, j) => ({
|
||||
// index: j,
|
||||
// distance: Math.hypot(
|
||||
// node[0] - nodes[i][0],
|
||||
// node[1] - nodes[i][1],
|
||||
// node[2] - nodes[i][2]
|
||||
// ),
|
||||
// }));
|
||||
|
||||
// distances.sort((a, b) => a.distance - b.distance);
|
||||
|
||||
// // Connect to 3 nearest neighbors
|
||||
// for (let j = 1; j <= 3 && j < distances.length; j++) {
|
||||
// const targetIndex = distances[j].index;
|
||||
// if (i < targetIndex) { // Avoid duplicate connections
|
||||
// conns.push([i, targetIndex]);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// return conns;
|
||||
// }, [nodes]);
|
||||
|
||||
// return (
|
||||
// <group position={position}>
|
||||
// {nodes.map((pos, i) => (
|
||||
// <AnimatedNeuralNode
|
||||
// key={i}
|
||||
// position={pos}
|
||||
// color={color}
|
||||
// delay={i * 0.1}
|
||||
// />
|
||||
// ))}
|
||||
|
||||
// {connections.map(([start, end], i) => (
|
||||
// <Line
|
||||
// key={i}
|
||||
// points={[nodes[start], nodes[end]]}
|
||||
// color={color}
|
||||
// lineWidth={1.5}
|
||||
// transparent
|
||||
// opacity={0.4}
|
||||
// toneMapped={false}
|
||||
// />
|
||||
// ))}
|
||||
// </group>
|
||||
// );
|
||||
// }
|
||||
|
||||
// export default function Home() {
|
||||
// const colors = [
|
||||
// "#00faff", // Cyan
|
||||
// "#00d9ff", // Light blue
|
||||
// "#00bfff", // Sky blue
|
||||
// "#1e90ff", // Dodger blue
|
||||
// "#007fff", // Azure
|
||||
// "#4dffff", // Electric cyan
|
||||
// ];
|
||||
|
||||
// // Fixed positions covering entire viewport in 3D space
|
||||
// const structures = useMemo(() => {
|
||||
// const positions = [
|
||||
// // Top row - Front layer
|
||||
// [-8, 5, 2],
|
||||
// [-4, 6, 2],
|
||||
// [0, 5.5, 2],
|
||||
// [4, 6, 2],
|
||||
// [8, 5, 2],
|
||||
|
||||
// // Middle-top row
|
||||
// [-7, 3, 0],
|
||||
// [-3.5, 3.5, 0],
|
||||
// [0, 3, 0],
|
||||
// [3.5, 3.5, 0],
|
||||
// [7, 3, 0],
|
||||
|
||||
// // Center row
|
||||
// [-8, 0, -1],
|
||||
// [-4, 0, -1],
|
||||
// [0, 0, -1],
|
||||
// [4, 0, -1],
|
||||
// [8, 0, -1],
|
||||
|
||||
// // Middle-bottom row
|
||||
// [-7, -3, 0],
|
||||
// [-3.5, -3.5, 0],
|
||||
// [0, -3, 0],
|
||||
// [3.5, -3.5, 0],
|
||||
// [7, -3, 0],
|
||||
|
||||
// // Bottom row - Front layer
|
||||
// [-8, -5, 2],
|
||||
// [-4, -6, 2],
|
||||
// [0, -5.5, 2],
|
||||
// [4, -6, 2],
|
||||
// [8, -5, 2],
|
||||
|
||||
// // Back layer scattered
|
||||
// [-6, 4, -4],
|
||||
// [6, 4, -4],
|
||||
// [-6, -4, -4],
|
||||
// [6, -4, -4],
|
||||
// [0, 5, -4],
|
||||
// [0, -5, -4],
|
||||
|
||||
|
||||
// ];
|
||||
|
||||
// return positions.map((position, i) => ({
|
||||
// position,
|
||||
// color: colors[i % colors.length],
|
||||
// structureIndex: i,
|
||||
// }));
|
||||
// }, []);
|
||||
// function CyberGridBackground() {
|
||||
// const gridRef = useRef();
|
||||
|
||||
// useFrame((state) => {
|
||||
// if (gridRef.current) {
|
||||
// // Subtle movement
|
||||
// gridRef.current.position.x = Math.sin(state.clock.elapsedTime * 0.1) * 0.5;
|
||||
// gridRef.current.position.y = Math.cos(state.clock.elapsedTime * 0.08) * 0.5;
|
||||
// }
|
||||
// });
|
||||
|
||||
// return (
|
||||
// <group ref={gridRef} position={[0, 0, -8]}>
|
||||
// {/* Main grid plane */}
|
||||
// <mesh rotation={[-Math.PI / 2, 0, 0]}>
|
||||
// <planeGeometry args={[60, 60, 60, 60]} />
|
||||
// <meshBasicMaterial
|
||||
// color="#001122"
|
||||
// wireframe
|
||||
// wireframeLinewidth={1}
|
||||
// transparent
|
||||
// opacity={0.2}
|
||||
// />
|
||||
// </mesh>
|
||||
|
||||
// {/* Vertical grid lines */}
|
||||
// <mesh rotation={[0, 0, 0]} position={[0, 0, 0]}>
|
||||
// <planeGeometry args={[60, 60, 60, 60]} />
|
||||
// <meshBasicMaterial
|
||||
// color="#003344"
|
||||
// wireframe
|
||||
// wireframeLinewidth={1}
|
||||
// transparent
|
||||
// opacity={0.15}
|
||||
// />
|
||||
// </mesh>
|
||||
|
||||
// {/* Glowing data points */}
|
||||
// {Array.from({ length: 50 }).map((_, i) => (
|
||||
// <mesh
|
||||
// key={i}
|
||||
// position={[
|
||||
// (Math.random() - 0.5) * 50,
|
||||
// (Math.random() - 0.5) * 50,
|
||||
// (Math.random() - 0.5) * 10
|
||||
// ]}
|
||||
// >
|
||||
// <sphereGeometry args={[0.03, 8, 8]} />
|
||||
// <meshBasicMaterial
|
||||
// color="#00faff"
|
||||
// toneMapped={false}
|
||||
// transparent
|
||||
// opacity={0.6}
|
||||
// />
|
||||
// </mesh>
|
||||
// ))}
|
||||
// </group>
|
||||
// );
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <div className="w-screen min-h-screen border-t border-cyan-500/20 bg-[#0b1117] overflow-y-auto">
|
||||
// <Navbar/>
|
||||
|
||||
// {/* Content Section */}
|
||||
// <div className="relative min-h-screen">
|
||||
// <div className="absolute inset-0 flex md:left-10 items-center justify-center z-10 pointer-events-none pt-20">
|
||||
// <Glow />
|
||||
// <motion.div
|
||||
// initial={{ opacity: 0 }}
|
||||
// animate={{ opacity: 1 }}
|
||||
// transition={{ duration: 1.5, ease: "easeOut", delay: 0.5 }}
|
||||
// className="px-8 py-6 rounded-2xl bg-slate-900/40 backdrop-blur-xl border border-cyan-500/30 shadow-2xl text-center pointer-events-auto mx-4 max-w-4xl"
|
||||
// >
|
||||
// <motion.div
|
||||
// initial="hidden"
|
||||
// animate="visible"
|
||||
// variants={{
|
||||
// hidden: { opacity: 0 },
|
||||
// visible: {
|
||||
// opacity: 1,
|
||||
// transition: {
|
||||
// staggerChildren: 0.3,
|
||||
// delayChildren: 0.2
|
||||
// }
|
||||
// }
|
||||
// }}
|
||||
// >
|
||||
// <motion.h1
|
||||
// variants={{
|
||||
// hidden: { opacity: 0, y: -20 },
|
||||
// visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
|
||||
// }}
|
||||
// className="text-3xl md:text-7xl font-bold text-cyan-200 drop-shadow-[0_0_20px_#00faff] mb-4 special-font"
|
||||
// style={{ fontFamily: "Orbitron, sans-serif" }}
|
||||
// >
|
||||
// <b>MACHINE LEARNING FOR EVERYONE</b>
|
||||
// </motion.h1>
|
||||
|
||||
// <motion.div
|
||||
// variants={{
|
||||
// hidden: { opacity: 0, scale: 0.9 },
|
||||
// visible: { opacity: 1, scale: 1, transition: { duration: 0.8, ease: "easeOut" } }
|
||||
// }}
|
||||
// className="text-2xl md:text-5xl font-bold text-cyan-300 drop-shadow-[0_0_15px_#00d9ff] mb-4"
|
||||
// style={{ fontFamily: "Orbitron, sans-serif" }}
|
||||
// >
|
||||
// (ML4E)
|
||||
// </motion.div>
|
||||
|
||||
// <motion.p
|
||||
// variants={{
|
||||
// hidden: { opacity: 0, y: 20 },
|
||||
// visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
|
||||
// }}
|
||||
// className="mt-2 text-base md:text-xl text-blue-300 drop-shadow-[0_0_10px_#00d9ff]"
|
||||
// style={{ fontFamily: "Roboto, sans-serif" }}
|
||||
// >
|
||||
// THE OFFICIAL MACHINE LEARNING CLUB OF NIT ROURKELA
|
||||
// </motion.p>
|
||||
// </motion.div>
|
||||
// </motion.div>
|
||||
// </div>
|
||||
|
||||
// {/* 3D Canvas */}
|
||||
// <div className="fixed inset-0 z-0">
|
||||
// <Canvas camera={{ position: [0, 0, 15], fov: 60 }}>
|
||||
// <color attach="background" args={["#000000"]} />
|
||||
// <CyberGridBackground />
|
||||
// <ambientLight intensity={0.5} />
|
||||
// <pointLight position={[10, 10, 10]} intensity={1.5} />
|
||||
// <pointLight position={[-10, -10, -10]} intensity={0.8} color="#00faff" />
|
||||
|
||||
// {structures.map((props, i) => (
|
||||
// <NeuralStructure key={i} {...props} />
|
||||
// ))}
|
||||
|
||||
// <OrbitControls
|
||||
// enableZoom={false}
|
||||
// autoRotate={false}
|
||||
// enablePan={false}
|
||||
// enableRotate={false}
|
||||
// minPolarAngle={Math.PI / 2}
|
||||
// maxPolarAngle={Math.PI / 2}
|
||||
// minDistance={10}
|
||||
// maxDistance={14}
|
||||
// />
|
||||
|
||||
// <EffectComposer>
|
||||
// <Bloom
|
||||
// intensity={2}
|
||||
// kernelSize={3}
|
||||
// luminanceThreshold={0.1}
|
||||
// luminanceSmoothing={0.9}
|
||||
// />
|
||||
// </EffectComposer>
|
||||
// </Canvas>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
import { Canvas } from "@react-three/fiber";
|
||||
import { OrbitControls } from "@react-three/drei";
|
||||
import { Sphere, Line } from "@react-three/drei";
|
||||
@@ -644,6 +6,7 @@ import { useFrame } from "@react-three/fiber";
|
||||
import { EffectComposer, Bloom } from "@react-three/postprocessing";
|
||||
import { motion } from "framer-motion";
|
||||
import Navbar from "./Navbar";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
|
||||
const Glow = ({ className = "" }) => (
|
||||
<div
|
||||
@@ -871,19 +234,34 @@ export default function Home() {
|
||||
}));
|
||||
}, [colors]);
|
||||
|
||||
const handleExploreClick = () => {
|
||||
// Dispatch custom event to open navbar
|
||||
if (typeof window !== "undefined") {
|
||||
window.dispatchEvent(new CustomEvent("open-navigation"));
|
||||
}
|
||||
|
||||
// Also scroll to next section if needed
|
||||
window.scrollTo({
|
||||
top: window.innerHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-full min-h-screen bg-[#0b1117] overflow-hidden" suppressHydrationWarning>
|
||||
<Navbar/>
|
||||
|
||||
{/* Content Section */}
|
||||
<div className="relative min-h-screen">
|
||||
<div className={`absolute inset-0 flex ${isMobile ? 'items-start pt-32' : 'md:left-10 items-center justify-center'} z-10 pointer-events-none pt-20`}>
|
||||
<div className={`absolute inset-0 flex ${isMobile ? 'items-start pt-32' : 'items-center justify-center'} z-10 pointer-events-none`}>
|
||||
<Glow />
|
||||
|
||||
{/* Main Content Container */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1.5, ease: "easeOut", delay: 0.5 }}
|
||||
className={`px-8 py-6 rounded-2xl bg-slate-900/40 backdrop-blur-xl border border-cyan-500/30 shadow-2xl text-center pointer-events-auto mx-4 ${isMobile ? 'mt-8' : 'max-w-4xl'}`}
|
||||
className={`flex flex-col items-center justify-center px-8 py-6 rounded-2xl bg-slate-900/40 backdrop-blur-xl border border-cyan-500/30 shadow-2xl text-center pointer-events-auto mx-4 ${isMobile ? 'mt-8 max-w-[90%]' : 'max-w-4xl'}`}
|
||||
>
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
@@ -898,6 +276,7 @@ export default function Home() {
|
||||
}
|
||||
}
|
||||
}}
|
||||
className="flex flex-col items-center"
|
||||
>
|
||||
<motion.h1
|
||||
variants={{
|
||||
@@ -926,11 +305,41 @@ export default function Home() {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
|
||||
}}
|
||||
className={`mt-2 ${isMobile ? 'text-sm' : 'text-base md:text-xl'} text-blue-300 drop-shadow-[0_0_10px_#00d9ff]`}
|
||||
className={`mt-2 ${isMobile ? 'text-sm' : 'text-base md:text-xl'} text-blue-300 drop-shadow-[0_0_10px_#00d9ff] mb-8 md:mb-12`}
|
||||
style={{ fontFamily: "Roboto, sans-serif" }}
|
||||
>
|
||||
THE OFFICIAL MACHINE LEARNING CLUB OF NIT ROURKELA
|
||||
</motion.p>
|
||||
|
||||
{/* Eye-catching Learn More Button */}
|
||||
<motion.button
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 1.5, ease: "easeOut" }}
|
||||
onClick={handleExploreClick}
|
||||
className="group relative overflow-hidden px-8 md:px-12 py-3 md:py-4 rounded-full bg-gradient-to-r from-cyan-500/20 via-cyan-600/30 to-blue-500/20 border border-cyan-400/50 hover:border-cyan-300 transition-all duration-300 cursor-pointer shadow-[0_0_30px_rgba(0,245,255,0.3)] hover:shadow-[0_0_40px_rgba(0,245,255,0.5)]"
|
||||
>
|
||||
{/* Glow effect behind button */}
|
||||
<div className="absolute inset-0 -z-10 bg-gradient-to-r from-cyan-500/10 to-blue-500/10 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
|
||||
{/* Button text and icon */}
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<span className={`${isMobile ? 'text-lg' : 'text-2xl'} font-orbitron font-bold bg-gradient-to-r from-cyan-200 to-blue-200 bg-clip-text text-transparent group-hover:from-white group-hover:to-cyan-100 transition-all duration-300`}>
|
||||
EXPLORE ML4E
|
||||
</span>
|
||||
<ChevronRight className="w-6 h-6 md:w-8 md:h-8 text-cyan-300 group-hover:text-white group-hover:translate-x-2 transition-all duration-300" />
|
||||
</div>
|
||||
|
||||
{/* Animated border effect */}
|
||||
<div className="absolute inset-0 rounded-full border border-cyan-400/30 group-hover:border-cyan-300/50 transition-all duration-300" />
|
||||
|
||||
{/* Pulsing ring effect */}
|
||||
<div className="absolute inset-0 rounded-full animate-pulse border border-cyan-500/20" />
|
||||
|
||||
{/* Neural connection dots effect */}
|
||||
<div className="absolute -top-1 -left-1 w-2 h-2 rounded-full bg-cyan-400 opacity-70 group-hover:opacity-100 group-hover:animate-ping" />
|
||||
<div className="absolute -bottom-1 -right-1 w-2 h-2 rounded-full bg-blue-400 opacity-70 group-hover:opacity-100 group-hover:animate-ping delay-75" />
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
@@ -939,7 +348,6 @@ export default function Home() {
|
||||
<div className="fixed inset-0 z-0">
|
||||
<Canvas
|
||||
camera={{ position: [0, 0, 15], fov: 60 }}
|
||||
// Disable touch events on mobile to allow scrolling
|
||||
style={{ touchAction: isMobile ? 'none' : 'auto' }}
|
||||
>
|
||||
<color attach="background" args={["#000000"]} />
|
||||
@@ -952,7 +360,6 @@ export default function Home() {
|
||||
<NeuralStructure key={i} {...props} />
|
||||
))}
|
||||
|
||||
{/* Disable controls on mobile */}
|
||||
{!isMobile && (
|
||||
<OrbitControls
|
||||
enableZoom={false}
|
||||
@@ -976,22 +383,17 @@ export default function Home() {
|
||||
</EffectComposer>
|
||||
</Canvas>
|
||||
|
||||
{/* Overlay for mobile to allow scrolling through the canvas */}
|
||||
{isMobile && (
|
||||
<div
|
||||
className="absolute inset-0 z-0"
|
||||
style={{
|
||||
pointerEvents: 'auto',
|
||||
touchAction: 'pan-y',
|
||||
// This ensures the canvas area doesn't block scrolling
|
||||
WebkitOverflowScrolling: 'touch'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Add scrollable content area */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
517
src/app/page.tsx
517
src/app/page.tsx
@@ -1,18 +1,5 @@
|
||||
// "use client"
|
||||
// import dynamic from "next/dynamic";
|
||||
// import Footer from "./components/Footer"
|
||||
// const Home = dynamic(() => import("./components/Home"), { ssr: false });
|
||||
// export default function App() {
|
||||
// return (
|
||||
// <>
|
||||
// <Home />
|
||||
// {/* <Hero3D /> */}
|
||||
// <Footer />
|
||||
// </>
|
||||
// );
|
||||
// }
|
||||
"use client"
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
@@ -20,194 +7,462 @@ const Home = dynamic(() => import("./components/Home"), { ssr: false });
|
||||
const AboutUs = dynamic(() => import("./components/AboutUs"), { ssr: false });
|
||||
const WhatWeDo = dynamic(() => import("./components/WhatWeDo"), { ssr: false });
|
||||
|
||||
// Preloader Component
|
||||
// Modern Cyberpunk Preloader Component
|
||||
function Preloader({ onComplete }: { onComplete: () => void }) {
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [dots, setDots] = useState<Array<{ left: string; top: string; duration: number; delay: number }>>([]);
|
||||
const [loadingTextIndex, setLoadingTextIndex] = useState(0);
|
||||
const [particles, setParticles] = useState<Array<{
|
||||
id: number;
|
||||
x: number;
|
||||
y: number;
|
||||
size: number;
|
||||
speedX: number;
|
||||
speedY: number;
|
||||
opacity: number;
|
||||
}>>([]);
|
||||
|
||||
const loadingTexts = [
|
||||
"Initializing neural interface...",
|
||||
"Loading quantum matrices...",
|
||||
"Calibrating data streams...",
|
||||
"Syncing with ML4E network...",
|
||||
"Establishing secure connection...",
|
||||
"Preparing immersive experience..."
|
||||
];
|
||||
|
||||
// Initialize particles
|
||||
useEffect(() => {
|
||||
// Generate dots only on client-side to avoid hydration mismatch
|
||||
const mulberry32 = (seed: number) => {
|
||||
return () => {
|
||||
let t = (seed += 0x6d2b79f5);
|
||||
t = Math.imul(t ^ (t >>> 15), t | 1);
|
||||
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
|
||||
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
||||
};
|
||||
};
|
||||
const rand = mulberry32(123456); // deterministic seed
|
||||
const generatedDots = Array.from({ length: 20 }).map(() => ({
|
||||
left: `${rand() * 100}%`,
|
||||
top: `${rand() * 100}%`,
|
||||
duration: 2 + rand() * 2,
|
||||
delay: rand() * 2,
|
||||
}));
|
||||
setDots(generatedDots);
|
||||
const newParticles = [];
|
||||
for (let i = 0; i < 40; i++) {
|
||||
newParticles.push({
|
||||
id: i,
|
||||
x: Math.random() * 100,
|
||||
y: Math.random() * 100,
|
||||
size: Math.random() * 2 + 0.5,
|
||||
speedX: (Math.random() - 0.5) * 0.3,
|
||||
speedY: (Math.random() - 0.5) * 0.3,
|
||||
opacity: Math.random() * 0.5 + 0.3
|
||||
});
|
||||
}
|
||||
setParticles(newParticles);
|
||||
}, []);
|
||||
|
||||
// Animate particles
|
||||
useEffect(() => {
|
||||
// Simulate loading progress
|
||||
if (particles.length === 0) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setProgress((prev) => {
|
||||
setParticles(prev => prev.map(p => ({
|
||||
...p,
|
||||
x: (p.x + p.speedX + 100) % 100,
|
||||
y: (p.y + p.speedY + 100) % 100
|
||||
})));
|
||||
}, 50);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [particles]);
|
||||
|
||||
// Progress animation
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setProgress(prev => {
|
||||
if (prev >= 100) {
|
||||
clearInterval(interval);
|
||||
setTimeout(() => onComplete(), 500); // Small delay before fade out
|
||||
setTimeout(() => onComplete(), 600);
|
||||
return 100;
|
||||
}
|
||||
return prev + Math.random() * 15; // Randomized progress increments
|
||||
// Simulate realistic loading with occasional jumps
|
||||
const increment = prev < 30 ? Math.random() * 8 + 2 :
|
||||
prev < 70 ? Math.random() * 6 + 1 :
|
||||
Math.random() * 4 + 0.5;
|
||||
return Math.min(prev + increment, 100);
|
||||
});
|
||||
}, 150);
|
||||
}, 120);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [onComplete]);
|
||||
|
||||
// Cycle through loading texts
|
||||
useEffect(() => {
|
||||
if (progress >= 100) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setLoadingTextIndex((prev) => (prev + 1) % loadingTexts.length);
|
||||
}, 2000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [progress]);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-[#0b1117] overflow-hidden"
|
||||
transition={{ duration: 0.7, ease: "easeInOut" }}
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-[#0a0f1a] overflow-hidden"
|
||||
>
|
||||
{/* Animated Background Glow */}
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute inset-0 opacity-40 blur-3xl
|
||||
[background:radial-gradient(60%_60%_at_50%_50%,rgba(0,255,255,.2),transparent_70%)]
|
||||
animate-pulse"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Neural Network Animation */}
|
||||
<div className="absolute inset-0 pointer-events-none opacity-30">
|
||||
{dots.map((dot, i) => (
|
||||
{/* Animated particle background */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
{particles.map((p) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="absolute w-2 h-2 bg-cyan-400 rounded-full"
|
||||
key={p.id}
|
||||
className="absolute rounded-full bg-cyan-400"
|
||||
style={{
|
||||
left: dot.left,
|
||||
top: dot.top,
|
||||
left: `${p.x}%`,
|
||||
top: `${p.y}%`,
|
||||
width: `${p.size}px`,
|
||||
height: `${p.size}px`,
|
||||
opacity: p.opacity,
|
||||
boxShadow: `0 0 ${p.size * 3}px ${p.size}px rgba(0, 245, 255, 0.2)`
|
||||
}}
|
||||
animate={{
|
||||
scale: [0, 1, 0],
|
||||
opacity: [0, 1, 0],
|
||||
scale: [1, 1.3, 1],
|
||||
opacity: [p.opacity * 0.5, p.opacity, p.opacity * 0.5]
|
||||
}}
|
||||
transition={{
|
||||
duration: dot.duration,
|
||||
duration: 2 + Math.random() * 2,
|
||||
repeat: Infinity,
|
||||
delay: dot.delay,
|
||||
delay: Math.random() * 2
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="relative z-10 text-center px-6">
|
||||
{/* Logo/Title */}
|
||||
<motion.div
|
||||
initial={{ scale: 0.5, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
className="mb-12"
|
||||
>
|
||||
<h1 className="text-6xl md:text-8xl font-bold text-cyan-200
|
||||
drop-shadow-[0_0_20px_#00faff] mb-4 special-font">
|
||||
ML4E
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-blue-300
|
||||
drop-shadow-[0_0_10px_#00d9ff]"
|
||||
style={{ fontFamily: "Roboto, sans-serif" }}>
|
||||
Machine Learning For Everyone
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Loading Bar */}
|
||||
<div className="w-64 md:w-96 mx-auto">
|
||||
<div className="relative h-2 bg-cyan-950/30 rounded-full overflow-hidden
|
||||
border border-cyan-500/20">
|
||||
<motion.div
|
||||
className="absolute inset-y-0 left-0 bg-gradient-to-r
|
||||
from-cyan-400 via-blue-400 to-cyan-300
|
||||
shadow-[0_0_20px_#00faff]"
|
||||
initial={{ width: "0%" }}
|
||||
animate={{ width: `${Math.min(progress, 100)}%` }}
|
||||
transition={{ duration: 0.3 }}
|
||||
{/* Hexagonal grid background */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(0, 245, 255, 0.15) 1px, transparent 0)`,
|
||||
backgroundSize: '40px 40px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Glowing effect on progress bar */}
|
||||
{/* Main loading container */}
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.6, ease: "easeOut" }}
|
||||
className="relative z-10 w-full max-w-4xl mx-6"
|
||||
>
|
||||
{/* Glowing border effect */}
|
||||
<div className="absolute -inset-4 rounded-3xl bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10 blur-2xl" />
|
||||
<div className="absolute -inset-0.5 rounded-3xl bg-gradient-to-r from-cyan-500/30 via-transparent to-purple-500/30 blur-sm" />
|
||||
|
||||
{/* Main card */}
|
||||
<div className="relative bg-[#0b1117]/80 backdrop-blur-2xl rounded-2xl border border-cyan-500/30 p-8 md:p-12 shadow-2xl">
|
||||
{/* Header with animated logo */}
|
||||
<div className="flex flex-col items-center mb-10">
|
||||
<motion.div
|
||||
className="absolute inset-y-0 left-0 bg-gradient-to-r
|
||||
from-transparent via-white to-transparent opacity-50"
|
||||
style={{ width: `${Math.min(progress, 100)}%` }}
|
||||
animate={{
|
||||
x: ["-100%", "100%"],
|
||||
scale: [1, 1.05, 1],
|
||||
rotateY: [0, 180, 360]
|
||||
}}
|
||||
transition={{
|
||||
duration: 1,
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
ease: "linear"
|
||||
}}
|
||||
className="relative mb-6"
|
||||
>
|
||||
{/* Holographic logo */}
|
||||
<div className="relative w-32 h-32">
|
||||
{/* Outer ring */}
|
||||
<div className="absolute inset-0 rounded-full border-2 border-cyan-400/50">
|
||||
<div className="absolute inset-0 rounded-full border border-cyan-300/30 animate-ping" />
|
||||
</div>
|
||||
|
||||
{/* Middle ring */}
|
||||
<div className="absolute inset-4 rounded-full border border-cyan-300/40">
|
||||
<motion.div
|
||||
className="absolute -inset-1 rounded-full border border-cyan-200/20"
|
||||
animate={{
|
||||
scale: [1, 1.2, 1]
|
||||
}}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Infinity
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Progress Percentage */}
|
||||
<motion.p
|
||||
className="mt-4 text-cyan-300 text-sm font-mono"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
>
|
||||
{Math.floor(Math.min(progress, 100))}%
|
||||
</motion.p>
|
||||
{/* Inner core */}
|
||||
<div className="absolute inset-8 rounded-full bg-gradient-to-br from-cyan-400/30 to-blue-500/30">
|
||||
<div className="absolute inset-0 rounded-full bg-gradient-to-tr from-transparent via-white/10 to-transparent" />
|
||||
</div>
|
||||
|
||||
{/* Loading Text */}
|
||||
<motion.p
|
||||
className="mt-8 text-blue-300/60 text-sm"
|
||||
animate={{ opacity: [0.4, 1, 0.4] }}
|
||||
{/* ML4E text */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<motion.span
|
||||
animate={{ opacity: [0.7, 1, 0.7] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
className="text-3xl font-bold bg-gradient-to-r from-cyan-300 via-white to-cyan-200 bg-clip-text text-transparent font-mono"
|
||||
>
|
||||
Initializing Neural Networks...
|
||||
ML4E
|
||||
</motion.span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Title */}
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="text-4xl md:text-5xl font-bold text-center mb-3"
|
||||
>
|
||||
<span className="bg-gradient-to-r from-cyan-300 via-blue-300 to-cyan-200 bg-clip-text text-transparent">
|
||||
MACHINE LEARNING
|
||||
</span>
|
||||
<br />
|
||||
<span className="text-2xl md:text-3xl font-light text-blue-300">
|
||||
For Everyone
|
||||
</span>
|
||||
</motion.h1>
|
||||
</div>
|
||||
|
||||
{/* Progress section */}
|
||||
<div className="space-y-6">
|
||||
{/* Progress bar with tech details */}
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<motion.div
|
||||
animate={{ opacity: [0.7, 1, 0.7] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity }}
|
||||
className="text-sm font-mono text-cyan-300"
|
||||
>
|
||||
SYSTEM LOADING
|
||||
</motion.div>
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.05, 1] }}
|
||||
transition={{ duration: 1, repeat: Infinity }}
|
||||
className="text-xl font-bold bg-gradient-to-r from-cyan-300 to-white bg-clip-text text-transparent font-mono"
|
||||
>
|
||||
{Math.floor(progress)}%
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Main progress bar */}
|
||||
<div className="relative h-3 bg-gray-900/50 rounded-full overflow-hidden border border-cyan-900/50">
|
||||
{/* Gradient fill */}
|
||||
<motion.div
|
||||
className="absolute inset-y-0 left-0 bg-gradient-to-r from-cyan-500 via-blue-400 to-cyan-300"
|
||||
initial={{ width: "0%" }}
|
||||
animate={{ width: `${progress}%` }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{/* Shimmer effect */}
|
||||
<motion.div
|
||||
className="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-transparent via-white/50 to-transparent"
|
||||
animate={{
|
||||
x: ["-100%", "200%"]
|
||||
}}
|
||||
transition={{
|
||||
duration: 1.5,
|
||||
repeat: Infinity,
|
||||
ease: "linear"
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Scanning line */}
|
||||
<motion.div
|
||||
className="absolute top-0 w-1 h-full bg-white/80 shadow-[0_0_10px_#fff]"
|
||||
animate={{
|
||||
left: ["0%", "100%"]
|
||||
}}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
ease: "linear"
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Glow effect */}
|
||||
<div className="absolute inset-0 rounded-full shadow-[inset_0_0_20px_rgba(0,245,255,0.3)]" />
|
||||
</div>
|
||||
|
||||
{/* Progress indicators */}
|
||||
<div className="flex justify-between mt-2">
|
||||
{[0, 25, 50, 75, 100].map((mark) => (
|
||||
<div key={mark} className="text-xs font-mono text-cyan-400/70">
|
||||
{mark}%
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading text with typing effect */}
|
||||
<div className="min-h-6">
|
||||
<motion.p
|
||||
key={loadingTextIndex}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="text-center text-cyan-300/80 font-mono text-sm md:text-base"
|
||||
>
|
||||
<span className="text-cyan-400">▶</span> {loadingTexts[loadingTextIndex]}
|
||||
<motion.span
|
||||
animate={{ opacity: [0, 1, 0] }}
|
||||
transition={{ duration: 0.8, repeat: Infinity }}
|
||||
className="ml-1"
|
||||
>
|
||||
█
|
||||
</motion.span>
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
{/* Corner Accents */}
|
||||
<div className="absolute top-0 left-0 w-32 h-32 border-t-2 border-l-2
|
||||
border-cyan-500/30" />
|
||||
<div className="absolute top-0 right-0 w-32 h-32 border-t-2 border-r-2
|
||||
border-cyan-500/30" />
|
||||
<div className="absolute bottom-0 left-0 w-32 h-32 border-b-2 border-l-2
|
||||
border-cyan-500/30" />
|
||||
<div className="absolute bottom-0 right-0 w-32 h-32 border-b-2 border-r-2
|
||||
border-cyan-500/30" />
|
||||
{/* Tech stats */}
|
||||
{/* <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
|
||||
{[
|
||||
{ label: "CPU", value: "Neural Core", color: "from-cyan-400 to-blue-400" },
|
||||
{ label: "RAM", value: "64GB Quantum", color: "from-blue-400 to-purple-400" },
|
||||
{ label: "GPU", value: "RTX AI", color: "from-purple-400 to-pink-400" },
|
||||
{ label: "NET", value: "10Gbps", color: "from-pink-400 to-cyan-400" }
|
||||
].map((stat, index) => (
|
||||
<motion.div
|
||||
key={stat.label}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.5 + index * 0.1 }}
|
||||
className="bg-black/30 rounded-xl p-4 border border-cyan-500/20"
|
||||
>
|
||||
<div className="text-xs text-cyan-400/70 font-mono mb-1">
|
||||
{stat.label}
|
||||
</div>
|
||||
<div className={`text-sm font-bold bg-gradient-to-r ${stat.color} bg-clip-text text-transparent font-mono`}>
|
||||
{stat.value}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* Bottom indicators */}
|
||||
<div className="mt-10 pt-6 border-t border-cyan-500/20">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
|
||||
<span className="text-xs text-cyan-300/60 font-mono">ACTIVE CONNECTION</span>
|
||||
</div>
|
||||
<div className="text-xs text-cyan-300/60 font-mono">
|
||||
v2.4.1 • NIT ROURKELA
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating tech elements */}
|
||||
<motion.div
|
||||
animate={{
|
||||
y: [0, -10, 0],
|
||||
rotate: [0, 5, 0]
|
||||
}}
|
||||
transition={{
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut"
|
||||
}}
|
||||
className="absolute -top-6 -right-6 w-24 h-24 border border-cyan-400/30 rounded-lg opacity-50"
|
||||
/>
|
||||
<motion.div
|
||||
animate={{
|
||||
y: [0, 10, 0],
|
||||
rotate: [0, -5, 0]
|
||||
}}
|
||||
transition={{
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
delay: 1
|
||||
}}
|
||||
className="absolute -bottom-6 -left-6 w-20 h-20 border border-blue-400/30 rounded-full opacity-50"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Ambient audio visualizer */}
|
||||
<div className="absolute bottom-10 left-0 right-0 flex justify-center space-x-1">
|
||||
{Array.from({ length: 30 }).map((_, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="w-1 bg-gradient-to-t from-cyan-400 to-blue-400 rounded-t-full"
|
||||
animate={{
|
||||
height: ["10%", `${20 + Math.random() * 60}%`, "10%"]
|
||||
}}
|
||||
transition={{
|
||||
duration: 0.5 + Math.random() * 1,
|
||||
repeat: Infinity,
|
||||
delay: i * 0.05
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [showHome, setShowHome] = useState(false);
|
||||
const [hasSeenIntro, setHasSeenIntro] = useState<boolean | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Start loading the Home component immediately
|
||||
setShowHome(true);
|
||||
setIsMounted(true);
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
const seen = sessionStorage.getItem('ml4e_hasSeenIntro');
|
||||
|
||||
if (seen === 'true') {
|
||||
setHasSeenIntro(true);
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
setHasSeenIntro(false);
|
||||
setIsLoading(true);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handlePreloaderComplete = () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
sessionStorage.setItem('ml4e_hasSeenIntro', 'true');
|
||||
}
|
||||
setHasSeenIntro(true);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
if (!isMounted || hasSeenIntro === null) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0a0f1a] flex items-center justify-center">
|
||||
<div className="w-16 h-16 border-4 border-cyan-500/30 border-t-cyan-400 rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<AnimatePresence>
|
||||
<AnimatePresence mode="wait">
|
||||
{isLoading && (
|
||||
<Preloader onComplete={() => setIsLoading(false)} />
|
||||
<Preloader onComplete={handlePreloaderComplete} />
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Home component loads in background while preloader shows */}
|
||||
<div style={{ display: isLoading ? "none" : "block" }} className="w-full">
|
||||
{showHome && (
|
||||
<div className="w-full">
|
||||
{/* Main content */}
|
||||
<div className={`transition-opacity duration-700 ${isLoading ? 'opacity-0' : 'opacity-100'}`}>
|
||||
<AnimatePresence mode="wait">
|
||||
{!isLoading && hasSeenIntro && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
className="w-full"
|
||||
>
|
||||
<Home />
|
||||
<AboutUs />
|
||||
<WhatWeDo />
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user