3DDemo.tsx
SplineScene.tsx
Splotlight.tsx
"use client";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { SplineScene } from "./components/SplineScene";
import { Spotlight } from "./components/Splotlight";
import { ArrowRight, Layers, Play } from "lucide-react";
import { CubeIcon } from "@radix-ui/react-icons";
export default function Page() {
return (
<Card className="w-full md:h-[900px] h-full bg-black/[0.96] relative md:overflow-hidden overflow-y-auto">
<Spotlight
className="-top-40 left-0 md:left-60 md:-top-20"
fill="white"
/>
{/* Grid Background */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,#232323_1px,transparent_1px),linear-gradient(to_bottom,#232323_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
<div className="md:flex h-full relative md:flex-row flex-col">
{/* Left content */}
<div className="flex-1 p-12 relative z-10 flex flex-col justify-center">
<div className="space-y-6">
{/* Badge */}
<div className="inline-flex items-center rounded-full border border-neutral-800 bg-neutral-900 px-3 py-1 text-sm text-neutral-400">
<span className="flex items-center gap-1">
<CubeIcon />
Explore 3D Scenes
</span>
</div>
{/* Heading */}
<h1 className="text-5xl md:text-6xl font-bold">
<span className="bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 leading-tight">
Interactive 3D Experiences
</span>
</h1>
{/* Description */}
<p className="text-neutral-400 text-lg max-w-lg">
Bring your UI to life with beautiful 3D scenes. Create immersive
experiences that capture attention and enhance your design.
</p>
{/* Buttons */}
<div className="flex flex-col sm:flex-row gap-4 pt-4">
<Button
size="lg"
className="bg-white text-black hover:bg-neutral-200 font-medium"
>
<Play className="mr-2 h-4 w-4" />
Try Demo
</Button>
<Button
size="lg"
variant="outline"
className="border-neutral-700 hover:bg-neutral-900"
>
<Layers className="mr-2 h-4 w-4" />
Contact Us
</Button>
</div>
{/* Features */}
<div className="grid grid-cols-2 gap-4 pt-8">
{[
"Custom animations",
"Interactive elements",
"Real-time updates",
"Physics simulation",
].map((feature) => (
<div
key={feature}
className="flex items-center gap-2 text-neutral-400"
>
<ArrowRight className="h-4 w-4 text-neutral-500" />
<span>{feature}</span>
</div>
))}
</div>
</div>
</div>
{/* Right content */}
<div className="flex-[2] relative">
<SplineScene
scene="https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode"
className="w-full h-full"
/>
</div>
</div>
</Card>
);
}
3DDemo.tsx
SplineScene.tsx
"use client";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { SplineScene } from "./components/SplineScene";
import { ArrowRight, Layers, Play } from "lucide-react";
import { CubeIcon } from "@radix-ui/react-icons";
export default function Page() {
return (
<Card className="w-full md:h-[900px] h-full bg-black/[0.96] relative md:overflow-hidden overflow-y-auto">
{/* Grid Background */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,#232323_1px,transparent_1px),linear-gradient(to_bottom,#232323_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
<div className="md:flex h-full relative md:flex-row flex-col">
{/* Left content */}
<div className="flex-1 p-12 relative z-10 flex flex-col justify-center">
<div className="space-y-6">
{/* Badge */}
<div className="inline-flex items-center rounded-full border border-neutral-800 bg-neutral-900 px-3 py-1 text-sm text-neutral-400">
<span className="flex items-center gap-1">
<CubeIcon />
Explore 3D Scenes
</span>
</div>
{/* Heading */}
<h1 className="text-5xl md:text-6xl font-bold">
<span className="bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 leading-tight">
Interactive 3D Experiences
</span>
</h1>
{/* Description */}
<p className="text-neutral-400 text-lg max-w-lg">
Bring your UI to life with beautiful 3D scenes. Create immersive
experiences that capture attention and enhance your design.
</p>
{/* Buttons */}
<div className="flex flex-col sm:flex-row gap-4 pt-4">
<Button
size="lg"
className="bg-white text-black hover:bg-neutral-200 font-medium"
>
<Play className="mr-2 h-4 w-4" />
Try Demo
</Button>
<Button
size="lg"
variant="outline"
className="border-neutral-700 hover:bg-neutral-900"
>
<Layers className="mr-2 h-4 w-4" />
Contact Us
</Button>
</div>
{/* Features */}
<div className="grid grid-cols-2 gap-4 pt-8">
{["Custom animations", "Interactive elements"].map((feature) => (
<div
key={feature}
className="flex items-center gap-2 text-neutral-400"
>
<ArrowRight className="h-4 w-4 text-neutral-500" />
<span>{feature}</span>
</div>
))}
</div>
</div>
</div>
{/* Right content */}
<div className="flex-[2] relative">
<SplineScene
scene="https://prod.spline.design/7OxTdCevrdyt9O8F/scene.splinecode"
className="w-full h-full"
/>
</div>
</div>
</Card>
);
}
3DDemo.tsx
SplineScene.tsx
"use client";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { SplineScene } from "./components/SplineScene";
import { ArrowRight, Layers, Play } from "lucide-react";
import { CubeIcon } from "@radix-ui/react-icons";
export default function Page() {
return (
<Card className="w-full md:h-[900px] h-full bg-black/[0.96] relative md:overflow-hidden overflow-y-auto">
{/* Grid Background */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,#232323_1px,transparent_1px),linear-gradient(to_bottom,#232323_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
<div className="md:flex h-full relative md:flex-row flex-col">
{/* Left content */}
<div className="flex-1 p-12 relative z-10 flex flex-col justify-center">
<div className="space-y-6">
{/* Badge */}
<div className="inline-flex items-center rounded-full border border-neutral-800 bg-neutral-900 px-3 py-1 text-sm text-neutral-400">
<span className="flex items-center gap-1">
<CubeIcon />
Explore 3D Scenes
</span>
</div>
{/* Heading */}
<h1 className="text-5xl md:text-6xl font-bold">
<span className="bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 leading-tight">
Interactive 3D Experiences
</span>
</h1>
{/* Description */}
<p className="text-neutral-400 text-lg max-w-lg">
Bring your UI to life with beautiful 3D scenes. Create immersive
experiences that capture attention and enhance your design.
</p>
{/* Buttons */}
<div className="flex flex-col sm:flex-row gap-4 pt-4">
<Button
size="lg"
className="bg-white text-black hover:bg-neutral-200 font-medium"
>
<Play className="mr-2 h-4 w-4" />
Try Demo
</Button>
<Button
size="lg"
variant="outline"
className="border-neutral-700 hover:bg-neutral-900"
>
<Layers className="mr-2 h-4 w-4" />
View Gallery
</Button>
</div>
{/* Features */}
<div className="grid grid-cols-2 gap-4 pt-8">
{["Custom animations", "Interactive elements"].map((feature) => (
<div
key={feature}
className="flex items-center gap-2 text-neutral-400"
>
<ArrowRight className="h-4 w-4 text-neutral-500" />
<span>{feature}</span>
</div>
))}
</div>
</div>
</div>
{/* Right content */}
<div className="flex-[2] relative">
<SplineScene
scene="https://prod.spline.design/eNw4JsXrhKKC42wX/scene.splinecode"
className="w-full h-full"
/>
</div>
</div>
</Card>
);
}
3DDemo.tsx
SplineScene.tsx
"use client";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { SplineScene } from "./components/SplineScene";
import { ArrowRight, Layers, Play } from "lucide-react";
import { CubeIcon } from "@radix-ui/react-icons";
export default function Page() {
return (
<Card className="w-full md:h-[900px] h-full bg-black/[0.96] relative md:overflow-hidden overflow-y-auto">
{/* Grid Background */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,#232323_1px,transparent_1px),linear-gradient(to_bottom,#232323_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
<div className="md:flex h-full relative md:flex-row flex-col">
{/* Left content */}
<div className="flex-1 p-12 relative z-10 flex flex-col justify-center">
<div className="space-y-6">
{/* Badge */}
<div className="inline-flex items-center rounded-full border border-neutral-800 bg-neutral-900 px-3 py-1 text-sm text-neutral-400">
<span className="flex items-center gap-1">
<CubeIcon />
Explore 3D Scenes
</span>
</div>
{/* Heading */}
<h1 className="text-5xl md:text-6xl font-bold">
<span className="bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 leading-tight">
Interactive 3D Experiences
</span>
</h1>
{/* Description */}
<p className="text-neutral-400 text-lg max-w-lg">
Bring your UI to life with beautiful 3D scenes. Create immersive
experiences that capture attention and enhance your design.
</p>
{/* Buttons */}
<div className="flex flex-col sm:flex-row gap-4 pt-4">
<Button
size="lg"
className="bg-white text-black hover:bg-neutral-200 font-medium"
>
<Play className="mr-2 h-4 w-4" />
Try Demo
</Button>
<Button
size="lg"
variant="outline"
className="border-neutral-700 hover:bg-neutral-900"
>
<Layers className="mr-2 h-4 w-4" />
View Gallery
</Button>
</div>
{/* Features */}
<div className="grid grid-cols-2 gap-4 pt-8">
{[
"Real-time rendering",
"Custom animations",
"Physics simulation",
"Interactive elements",
].map((feature) => (
<div
key={feature}
className="flex items-center gap-2 text-neutral-400"
>
<ArrowRight className="h-4 w-4 text-neutral-500" />
<span>{feature}</span>
</div>
))}
</div>
</div>
</div>
{/* Right content */}
<div className="flex-[2] relative">
<SplineScene
scene="https://prod.spline.design/Tcgf9SbzHVl5NF90/scene.splinecode"
className="w-full h-full"
/>
</div>
</div>
</Card>
);
}