51 lines
No EOL
2.1 KiB
TypeScript
51 lines
No EOL
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { Canvas } from '@react-three/fiber';
|
|
import { OrbitControls, Stage, ContactShadows, Environment } from '@react-three/drei';
|
|
import { Suspense } from 'react';
|
|
import { Model } from './Model';
|
|
import { motion } from 'framer-motion';
|
|
|
|
export default function ShowcaseCanvas() {
|
|
return (
|
|
// Added 'bg-zinc-50' and a subtle 'bg-grid' style pattern
|
|
// Replace your div className with this:
|
|
<div className="relative h-[650px] w-full rounded-2xl overflow-hidden shadow-2xl bg-stone-100 border border-stone-200 bg-[linear-gradient(to_right,#d6d3d1_1px,transparent_1px),linear-gradient(to_bottom,#d6d3d1_1px,transparent_1px)] bg-[size:40px_40px]">
|
|
{/* 3D Canvas */}
|
|
<Canvas shadows camera={{ position: [0, 0, 4], fov: 45 }}>
|
|
<Suspense fallback={null}>
|
|
<Environment preset="city" />
|
|
<Stage intensity={0.5} adjustCamera={false}>
|
|
<Model url="/models/shoe.glb" />
|
|
</Stage>
|
|
<ContactShadows opacity={0.4} scale={10} blur={2} far={4.5} />
|
|
</Suspense>
|
|
<OrbitControls
|
|
makeDefault
|
|
enablePan={false}
|
|
minPolarAngle={Math.PI / 4}
|
|
maxPolarAngle={Math.PI / 1.75}
|
|
/>
|
|
</Canvas>
|
|
|
|
{/* UI Overlay */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
className="absolute top-10 right-10 z-10 w-72 bg-black/80 backdrop-blur-xl p-6 rounded-2xl text-white shadow-2xl"
|
|
>
|
|
<h2 className="text-2xl font-bold tracking-tight">AIR JORDAN 1</h2>
|
|
<p className="text-zinc-300 mt-2 text-sm leading-relaxed">
|
|
Engineered for performance and style. Experience the pinnacle of sneaker culture.
|
|
</p>
|
|
<div className="flex items-center justify-between mt-6">
|
|
<span className="text-lg font-bold">$170.00</span>
|
|
<button className="bg-white text-black px-5 py-2 text-sm rounded-full font-bold hover:bg-zinc-200 transition-colors duration-300">
|
|
BUY NOW
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
} |