feat: replace heavy 3d models with parallax product images
Build and Deploy / build-and-push (push) Successful in 28s
Build and Deploy / build-and-push (push) Successful in 28s
This commit is contained in:
AI Bot
Binary file not shown.
|
After Width: | Height: | Size: 726 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 710 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 886 KiB |
@@ -1,4 +1,4 @@
|
||||
import { Scroll, Image } from '@react-three/drei';
|
||||
import { Scroll, Image, Float } from '@react-three/drei';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { Box, Layers, Zap, Globe, Sparkles } from 'lucide-react';
|
||||
|
||||
@@ -9,9 +9,20 @@ export function Overlay() {
|
||||
<>
|
||||
{/* 3D Background Images Parallax Layer */}
|
||||
<Scroll>
|
||||
<Image url="/assets/images/bg_hero.png" scale={[16, 10]} position={[0, 0, -5]} transparent opacity={0.6} />
|
||||
<Image url="/assets/images/bg_features.png" scale={[16, 10]} position={[0, -10, -5]} transparent opacity={0.5} />
|
||||
<Image url="/assets/images/bg_cta.png" scale={[16, 10]} position={[0, -20, -5]} transparent opacity={0.6} />
|
||||
<Image url="/assets/images/bg_hero.png" scale={[16, 10]} position={[0, 0, -8]} transparent opacity={0.2} />
|
||||
|
||||
{/* Parallax Floating Products */}
|
||||
<Float speed={2} rotationIntensity={0.2} floatIntensity={0.5}>
|
||||
<Image url="/assets/images/cavinkare_shampoo.jpg" scale={[4.5, 4.5]} position={[3, 0, -2]} />
|
||||
</Float>
|
||||
|
||||
<Float speed={2} rotationIntensity={0.2} floatIntensity={0.5}>
|
||||
<Image url="/assets/images/meera_herbal.jpg" scale={[4.5, 4.5]} position={[-3, -9.5, -2]} />
|
||||
</Float>
|
||||
|
||||
<Float speed={2} rotationIntensity={0.2} floatIntensity={0.5}>
|
||||
<Image url="/assets/images/cavins_milkshake.jpg" scale={[4.5, 4.5]} position={[3, -19.5, -2]} />
|
||||
</Float>
|
||||
</Scroll>
|
||||
|
||||
{/* HTML UI Layer */}
|
||||
@@ -31,51 +42,51 @@ export function Overlay() {
|
||||
|
||||
{/* Section 1: Hero */}
|
||||
<section className="w-screen h-screen flex flex-col justify-center items-start px-12 md:px-32 text-white">
|
||||
<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">
|
||||
<div className="max-w-4xl p-10 rounded-[2.5rem] bg-black/40 backdrop-blur-xl border border-white/10 shadow-2xl shadow-black/50">
|
||||
<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">
|
||||
<Sparkles size={16} className="text-primary" />
|
||||
<span className="text-sm font-medium">Next-Gen 3D Configurator</span>
|
||||
<span className="text-sm font-medium">Premium Care Collection</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.
|
||||
CavinKare.
|
||||
</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.
|
||||
Experience the fusion of natural purity and luxurious care. Explore our exclusive range of hair and skin wellness products.
|
||||
</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
|
||||
Explore Products
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<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">
|
||||
<div className="p-10 rounded-[2.5rem] bg-black/40 backdrop-blur-xl border border-white/10 shadow-2xl shadow-black/50 flex flex-col items-end">
|
||||
<h2 className="text-5xl md:text-7xl font-bold tracking-tighter mb-12 max-w-3xl">
|
||||
Unleash Unprecedented <span className="text-blue-400">Power</span>.
|
||||
Goodness of <span className="text-green-400">Herbs</span>.
|
||||
</h2>
|
||||
|
||||
<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/10 border border-white/20 backdrop-blur-md hover:bg-white/15 transition-all cursor-default">
|
||||
<div className="text-left">
|
||||
<h3 className="text-2xl font-bold mb-2">Real-time Rendering</h3>
|
||||
<p className="text-zinc-300">Experience photorealistic materials and lighting instantly.</p>
|
||||
<h3 className="text-2xl font-bold mb-2">Meera Hairwash</h3>
|
||||
<p className="text-zinc-300">Tradition passed down through generations for strong, healthy hair.</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 className="w-16 h-16 rounded-full bg-green-500/20 border border-green-500/30 flex items-center justify-center shrink-0">
|
||||
<Layers className="text-green-400" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<h3 className="text-2xl font-bold mb-2">AI Asset Generation</h3>
|
||||
<p className="text-zinc-300">Turn text prompts into high-fidelity 3D models in seconds.</p>
|
||||
<h3 className="text-2xl font-bold mb-2">Natural Ingredients</h3>
|
||||
<p className="text-zinc-300">Shikakai, Reetha, and Amla extracts for natural nourishment.</p>
|
||||
</div>
|
||||
<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} />
|
||||
<div className="w-16 h-16 rounded-full bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center shrink-0">
|
||||
<Zap className="text-emerald-400" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,19 +97,19 @@ export function Overlay() {
|
||||
<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="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">
|
||||
<Globe size={64} className="text-emerald-400 mb-8 animate-pulse drop-shadow-[0_0_15px_rgba(52,211,153,0.5)]" />
|
||||
<div className="relative z-10 p-16 rounded-[3rem] bg-black/40 backdrop-blur-xl border border-white/10 shadow-2xl shadow-black/50 flex flex-col items-center">
|
||||
<Globe size={64} className="text-blue-400 mb-8 animate-pulse drop-shadow-[0_0_15px_rgba(96,165,250,0.5)]" />
|
||||
<h2 className="text-6xl md:text-8xl font-bold tracking-tighter mb-6">
|
||||
Ready to Deploy?
|
||||
Sip The Joy.
|
||||
</h2>
|
||||
<p className="text-2xl text-zinc-300 max-w-2xl mb-12">
|
||||
Join elite creators building the next generation of spatial computing experiences.
|
||||
Delicious Cavin's milkshakes enriched with the goodness of pure milk.
|
||||
</p>
|
||||
<button
|
||||
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
|
||||
Order Now
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -2,7 +2,6 @@ import { useRef } from 'react';
|
||||
import { useFrame } from '@react-three/fiber';
|
||||
import { Environment, Float, Sparkles } from '@react-three/drei';
|
||||
import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing';
|
||||
import { Models } from './Models';
|
||||
|
||||
export function Scene() {
|
||||
const group = useRef<THREE.Group>(null);
|
||||
@@ -28,9 +27,6 @@ export function Scene() {
|
||||
|
||||
{/* Main Content */}
|
||||
<group ref={group}>
|
||||
<Float speed={1.5} rotationIntensity={0.5} floatIntensity={0.5}>
|
||||
<Models />
|
||||
</Float>
|
||||
|
||||
{/* Floating Particles */}
|
||||
<Sparkles count={300} scale={15} size={3} speed={0.4} opacity={0.3} color="#a78bfa" />
|
||||
|
||||
Reference in New Issue
Block a user