Spaces:
Running
Running
File size: 5,441 Bytes
72f0edb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
import React, { useEffect, useRef, useState } from "react";
import ContentCarousel from "../components/ContentCarousel";
import Header from "../components/Header";
import ChatWindow from "../components/ChatWindow";
import TeamSection from "../components/TeamSection";
import SplineViewer from "../components/SplineViewer";
import { useCategories } from "@/hooks/useUrdfData";
import { Skeleton } from "@/components/ui/skeleton";
const IndexCopy: React.FC = () => {
// const parallaxRef = useRef<HTMLDivElement>(null);
const sectionRefs = useRef<(HTMLElement | null)[]>([]);
const ticking = useRef<boolean>(false);
const [scrollY, setScrollY] = useState<number>(0);
const { data: categories, isLoading } = useCategories();
// Add parallax effect on scroll using requestAnimationFrame for better performance
useEffect(() => {
const handleScroll = () => {
if (!ticking.current) {
window.requestAnimationFrame(() => {
setScrollY(window.scrollY);
ticking.current = false;
});
ticking.current = true;
}
};
// Initialize section references
const categoryElements =
document.querySelectorAll<HTMLElement>(".category-section");
sectionRefs.current = Array.from(categoryElements);
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
// Only get the trending category
const trendingCategory = categories?.find(
(category) => category.id === "trending"
);
return (
<div className="min-h-screen bg-netflix-background text-netflix-text">
<Header />
{/* Cosmic background wrapper for the entire page */}
<div className="cosmic-background fixed inset-0 z-0">
{/* Cosmic background with stars */}
<div className="absolute inset-0 bg-[#0a0a14] overflow-hidden">
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwMCIgaGVpZ2h0PSIyMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9Im4iPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuNyIgbnVtT2N0YXZlcz0iMTAiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48ZmVCbGVuZCBtb2RlPSJzY3JlZW4iLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9Ii4xIi8+PC9zdmc+')] bg-repeat opacity-30"></div>
{/* Subtle animated gradient overlay */}
<div className="absolute inset-0 bg-gradient-to-b from-indigo-900/20 via-transparent to-black/30"></div>
{/* Random stars */}
<div className="stars absolute inset-0"></div>
</div>
</div>
<main className="container mx-auto px-4 pb-8 max-w-full relative z-10">
{/* Cosmic hero section with parallax text */}
<section className="relative overflow-visible">
<div className="w-full relative mb-8 flex items-start justify-center">
{/* Parallax text container */}
<div className="relative z-10 text-left px- md:px-0 max-w-6xl mx-auto mt-24 pt-16">
<h1 className="text-7xl md:text-[13rem] font-bold tracking-tighter whitespace-nowrap text-white animate-fade-in text-glow leading-none font-sans">
<span className="block -mb-12 text-gradient-white">PROMPT</span>
<span className="block -mb-12 text-gradient-white">
SPATIAL
</span>
<span className="block text-gradient-white pb-4">AGENTS</span>
</h1>
{/* Spline 3D Asset with increased height and no overflow cutting */}
<div className="w-full h-[400px] relative -mt-20 z-0 overflow-visible">
<SplineViewer
splineUrl="https://prod.spline.design/Ze6evzKLyY-Xq6uh/scene.splinecode"
className="h-full overflow-visible"
/>
</div>
</div>
</div>
</section>
{/* Chat Window Section - Moved right below the title */}
<section className="mb-20 max-w-4xl mx-auto">
<div className="glass-panel">
<ChatWindow />
</div>
</section>
{/* Content sections with glass panels */}
<div className="relative z-10">
{/* Team Section */}
<TeamSection />
{/* Only display trending category */}
{isLoading ? (
<section className="category-section min-h-[20vh] mt-12">
<Skeleton className="h-10 w-48 mb-8" />
<Skeleton className="h-64 w-full" />
</section>
) : trendingCategory ? (
<section className="category-section min-h-[20vh] mt-12">
<h2 className="text-3xl font-bold mb-8 text-netflix-text text-glow">
{trendingCategory.name}
</h2>
<ContentCarousel
key={trendingCategory.id}
category={trendingCategory}
/>
<div className="mt-6 text-center">
<a
href="/explore"
className="inline-block bg-sidebar-accent px-6 py-3 rounded-lg text-white font-semibold hover:bg-opacity-80 transition-colors"
>
Explore All Robots
</a>
</div>
</section>
) : null}
</div>
</main>
</div>
);
};
export default IndexCopy;
|