Added glass UI for text legibility and increased model sizes
This commit is contained in:
AI Bot
@@ -29,8 +29,8 @@ export function Models() {
|
|||||||
heroRef.current.position.y = THREE.MathUtils.lerp(0, 10, offset * 3);
|
heroRef.current.position.y = THREE.MathUtils.lerp(0, 10, offset * 3);
|
||||||
heroRef.current.position.x = THREE.MathUtils.lerp(3, -5, offset * 3);
|
heroRef.current.position.x = THREE.MathUtils.lerp(3, -5, offset * 3);
|
||||||
|
|
||||||
// GEE_TIN increased by 50% (0.05 -> 0.075)
|
// GEE_TIN increased by 300% (0.05 -> 0.15)
|
||||||
const scaleBase = 0.075;
|
const scaleBase = 0.15;
|
||||||
heroRef.current.scale.setScalar(THREE.MathUtils.lerp(scaleBase, 0, offset * 3));
|
heroRef.current.scale.setScalar(THREE.MathUtils.lerp(scaleBase, 0, offset * 3));
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -41,7 +41,8 @@ export function Models() {
|
|||||||
featureRef.current.position.y = THREE.MathUtils.lerp(-10, 0, featureProgress);
|
featureRef.current.position.y = THREE.MathUtils.lerp(-10, 0, featureProgress);
|
||||||
featureRef.current.position.x = THREE.MathUtils.lerp(-5, -2, featureProgress);
|
featureRef.current.position.x = THREE.MathUtils.lerp(-5, -2, featureProgress);
|
||||||
|
|
||||||
const scaleBase = 0.05;
|
// MAA_Bottle increased by 300% (0.05 -> 0.15)
|
||||||
|
const scaleBase = 0.15;
|
||||||
if (offset > 0.6) {
|
if (offset > 0.6) {
|
||||||
const exitProgress = (offset - 0.6) * 3;
|
const exitProgress = (offset - 0.6) * 3;
|
||||||
featureRef.current.position.y = THREE.MathUtils.lerp(0, 10, exitProgress);
|
featureRef.current.position.y = THREE.MathUtils.lerp(0, 10, exitProgress);
|
||||||
|
|||||||
@@ -31,48 +31,52 @@ export function Overlay() {
|
|||||||
|
|
||||||
{/* Section 1: Hero */}
|
{/* Section 1: Hero */}
|
||||||
<section className="w-screen h-screen flex flex-col justify-center items-start px-12 md:px-32 text-white">
|
<section className="w-screen h-screen flex flex-col justify-center items-start px-12 md:px-32 text-white">
|
||||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-md mb-6">
|
<div className="max-w-4xl p-10 rounded-[2.5rem] bg-black/30 backdrop-blur-xl border border-white/10 shadow-2xl shadow-black/50">
|
||||||
<Sparkles size={16} className="text-primary" />
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 border border-white/20 backdrop-blur-md mb-8">
|
||||||
<span className="text-sm font-medium">Next-Gen 3D Configurator</span>
|
<Sparkles size={16} className="text-primary" />
|
||||||
|
<span className="text-sm font-medium">Next-Gen 3D Configurator</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-6xl md:text-8xl font-extrabold tracking-tighter leading-tight mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white via-zinc-200 to-zinc-500">
|
||||||
|
Build The Future in 3D.
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl md:text-2xl text-zinc-300 max-w-2xl mb-10 font-light">
|
||||||
|
An ultra-premium, AI-driven platform to visualize, construct, and deploy stunning 3D assets directly in your browser.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => openAuthModal('register')}
|
||||||
|
className="px-8 py-4 bg-primary hover:bg-primary/90 rounded-full font-bold text-lg shadow-[0_0_40px_rgba(var(--primary-rgb),0.5)] hover:scale-105 transition-all"
|
||||||
|
>
|
||||||
|
Start Building Free
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-6xl md:text-8xl font-extrabold tracking-tighter leading-tight mb-6 max-w-4xl bg-clip-text text-transparent bg-gradient-to-r from-white via-zinc-200 to-zinc-500">
|
|
||||||
Build The Future in 3D.
|
|
||||||
</h1>
|
|
||||||
<p className="text-xl md:text-2xl text-zinc-400 max-w-2xl mb-10 font-light">
|
|
||||||
An ultra-premium, AI-driven platform to visualize, construct, and deploy stunning 3D assets directly in your browser.
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
onClick={() => openAuthModal('register')}
|
|
||||||
className="px-8 py-4 bg-primary hover:bg-primary/90 rounded-full font-bold text-lg shadow-[0_0_40px_rgba(var(--primary-rgb),0.5)] hover:scale-105 transition-all"
|
|
||||||
>
|
|
||||||
Start Building Free
|
|
||||||
</button>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Section 2: Features */}
|
{/* Section 2: Features */}
|
||||||
<section className="w-screen h-screen flex flex-col justify-center items-end px-12 md:px-32 text-white text-right">
|
<section className="w-screen h-screen flex flex-col justify-center items-end px-12 md:px-32 text-white text-right">
|
||||||
<h2 className="text-5xl md:text-7xl font-bold tracking-tighter mb-16 max-w-3xl">
|
<div className="p-10 rounded-[2.5rem] bg-black/30 backdrop-blur-xl border border-white/10 shadow-2xl shadow-black/50 flex flex-col items-end">
|
||||||
Unleash Unprecedented <span className="text-blue-400">Power</span>.
|
<h2 className="text-5xl md:text-7xl font-bold tracking-tighter mb-12 max-w-3xl">
|
||||||
</h2>
|
Unleash Unprecedented <span className="text-blue-400">Power</span>.
|
||||||
|
</h2>
|
||||||
|
|
||||||
<div className="flex flex-col gap-8 max-w-xl">
|
<div className="flex flex-col gap-6 max-w-xl">
|
||||||
<div className="flex items-center justify-end gap-6 p-6 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-md hover:bg-white/10 transition-all">
|
<div className="flex items-center justify-end gap-6 p-6 rounded-2xl bg-white/10 border border-white/20 backdrop-blur-md hover:bg-white/15 transition-all cursor-default">
|
||||||
<div className="text-left">
|
<div className="text-left">
|
||||||
<h3 className="text-2xl font-bold mb-2">Real-time Rendering</h3>
|
<h3 className="text-2xl font-bold mb-2">Real-time Rendering</h3>
|
||||||
<p className="text-zinc-400">Experience photorealistic materials and lighting instantly.</p>
|
<p className="text-zinc-300">Experience photorealistic materials and lighting instantly.</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-16 h-16 rounded-full bg-blue-500/20 border border-blue-500/30 flex items-center justify-center shrink-0">
|
||||||
|
<Layers className="text-blue-400" size={32} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-16 h-16 rounded-full bg-blue-500/20 flex items-center justify-center shrink-0">
|
|
||||||
<Layers className="text-blue-400" size={32} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-end gap-6 p-6 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-md hover:bg-white/10 transition-all">
|
<div className="flex items-center justify-end gap-6 p-6 rounded-2xl bg-white/10 border border-white/20 backdrop-blur-md hover:bg-white/15 transition-all cursor-default">
|
||||||
<div className="text-left">
|
<div className="text-left">
|
||||||
<h3 className="text-2xl font-bold mb-2">AI Asset Generation</h3>
|
<h3 className="text-2xl font-bold mb-2">AI Asset Generation</h3>
|
||||||
<p className="text-zinc-400">Turn text prompts into high-fidelity 3D models in seconds.</p>
|
<p className="text-zinc-300">Turn text prompts into high-fidelity 3D models in seconds.</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-16 h-16 rounded-full bg-purple-500/20 flex items-center justify-center shrink-0">
|
<div className="w-16 h-16 rounded-full bg-purple-500/20 border border-purple-500/30 flex items-center justify-center shrink-0">
|
||||||
<Zap className="text-purple-400" size={32} />
|
<Zap className="text-purple-400" size={32} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -82,19 +86,21 @@ export function Overlay() {
|
|||||||
<section className="w-screen h-screen flex flex-col justify-center items-center text-center px-12 text-white relative">
|
<section className="w-screen h-screen flex flex-col justify-center items-center text-center px-12 text-white relative">
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-zinc-950 via-transparent to-transparent pointer-events-none" />
|
<div className="absolute inset-0 bg-gradient-to-t from-zinc-950 via-transparent to-transparent pointer-events-none" />
|
||||||
|
|
||||||
<Globe size={64} className="text-emerald-400 mb-8 animate-pulse" />
|
<div className="relative z-10 p-16 rounded-[3rem] bg-black/30 backdrop-blur-xl border border-white/10 shadow-2xl shadow-black/50 flex flex-col items-center">
|
||||||
<h2 className="text-6xl md:text-8xl font-bold tracking-tighter mb-6">
|
<Globe size={64} className="text-emerald-400 mb-8 animate-pulse drop-shadow-[0_0_15px_rgba(52,211,153,0.5)]" />
|
||||||
Ready to Deploy?
|
<h2 className="text-6xl md:text-8xl font-bold tracking-tighter mb-6">
|
||||||
</h2>
|
Ready to Deploy?
|
||||||
<p className="text-2xl text-zinc-400 max-w-2xl mb-12">
|
</h2>
|
||||||
Join elite creators building the next generation of spatial computing experiences.
|
<p className="text-2xl text-zinc-300 max-w-2xl mb-12">
|
||||||
</p>
|
Join elite creators building the next generation of spatial computing experiences.
|
||||||
<button
|
</p>
|
||||||
onClick={() => openAuthModal('register')}
|
<button
|
||||||
className="px-10 py-5 bg-white text-black hover:bg-zinc-200 rounded-full font-bold text-xl transition-all hover:scale-105"
|
onClick={() => openAuthModal('register')}
|
||||||
>
|
className="px-10 py-5 bg-white text-black hover:bg-zinc-200 rounded-full font-bold text-xl transition-all hover:scale-105 shadow-xl"
|
||||||
Create Your Workspace
|
>
|
||||||
</button>
|
Create Your Workspace
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</Scroll>
|
</Scroll>
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in New Issue
Block a user