← back to Jim Gravity
jim-dultz-gravity/src/app/page.tsx
191 lines
"use client"
import { Gravity, MatterBody } from "@/components/ui/gravity";
import { Palette, Paintbrush, Sparkles, Circle, Square, Triangle } from "lucide-react";
export default function Home() {
return (
<main className="w-full h-screen overflow-hidden bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
{/* Header */}
<div className="relative z-10 pt-12 text-center">
<h1 className="text-7xl md:text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600">
Jim Dultz
</h1>
<p className="mt-4 text-2xl md:text-3xl text-gray-700 font-light">
Contemporary Artist
</p>
<p className="mt-2 text-lg md:text-xl text-gray-500">
Prisms • Rods • 3D Art • Sculpture • Mixed Media
</p>
</div>
{/* Gravity Physics Playground */}
<Gravity gravity={{ x: 0, y: 0.8 }} className="w-full h-full">
{/* Art Tools */}
<MatterBody
matterBodyOptions={{ friction: 0.3, restitution: 0.6, density: 0.002 }}
x="15%"
y="20%"
bodyType="circle"
>
<div className="flex items-center justify-center w-24 h-24 bg-gradient-to-br from-orange-400 to-red-500 rounded-full shadow-2xl hover:cursor-grab">
<Paintbrush className="w-12 h-12 text-white" />
</div>
</MatterBody>
<MatterBody
matterBodyOptions={{ friction: 0.3, restitution: 0.6, density: 0.002 }}
x="85%"
y="25%"
bodyType="circle"
>
<div className="flex items-center justify-center w-28 h-28 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full shadow-2xl hover:cursor-grab">
<Palette className="w-14 h-14 text-white" />
</div>
</MatterBody>
{/* Geometric Shapes - Artist's Elements */}
<MatterBody
matterBodyOptions={{ friction: 0.4, restitution: 0.5, density: 0.003 }}
x="30%"
y="15%"
angle={15}
>
<div className="px-8 py-6 text-2xl font-bold text-white bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl shadow-2xl hover:cursor-grab">
PRISMS
</div>
</MatterBody>
<MatterBody
matterBodyOptions={{ friction: 0.4, restitution: 0.5, density: 0.003 }}
x="70%"
y="18%"
angle={-10}
>
<div className="px-8 py-6 text-2xl font-bold text-white bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl shadow-2xl hover:cursor-grab">
RODS
</div>
</MatterBody>
<MatterBody
matterBodyOptions={{ friction: 0.4, restitution: 0.5, density: 0.003 }}
x="50%"
y="12%"
angle={5}
>
<div className="px-10 py-7 text-3xl font-bold text-white bg-gradient-to-br from-pink-500 to-rose-600 rounded-2xl shadow-2xl hover:cursor-grab">
3D ART
</div>
</MatterBody>
{/* Colorful Pills */}
<MatterBody
matterBodyOptions={{ friction: 0.3, restitution: 0.7, density: 0.002 }}
x="20%"
y="35%"
>
<div className="px-6 py-3 text-lg font-semibold text-white bg-gradient-to-r from-teal-400 to-emerald-500 rounded-full shadow-lg hover:cursor-grab">
Sculpture
</div>
</MatterBody>
<MatterBody
matterBodyOptions={{ friction: 0.3, restitution: 0.7, density: 0.002 }}
x="80%"
y="40%"
>
<div className="px-6 py-3 text-lg font-semibold text-white bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full shadow-lg hover:cursor-grab">
Paintings
</div>
</MatterBody>
<MatterBody
matterBodyOptions={{ friction: 0.3, restitution: 0.7, density: 0.002 }}
x="40%"
y="30%"
>
<div className="px-6 py-3 text-lg font-semibold text-white bg-gradient-to-r from-fuchsia-400 to-purple-500 rounded-full shadow-lg hover:cursor-grab">
Mixed Media
</div>
</MatterBody>
<MatterBody
matterBodyOptions={{ friction: 0.3, restitution: 0.7, density: 0.002 }}
x="60%"
y="32%"
>
<div className="px-6 py-3 text-lg font-semibold text-white bg-gradient-to-r from-blue-400 to-indigo-500 rounded-full shadow-lg hover:cursor-grab">
Cartoons
</div>
</MatterBody>
{/* Sparkle Icons */}
<MatterBody
matterBodyOptions={{ friction: 0.2, restitution: 0.8, density: 0.001 }}
x="10%"
y="45%"
bodyType="circle"
>
<div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-amber-300 to-yellow-400 rounded-full shadow-xl hover:cursor-grab">
<Sparkles className="w-8 h-8 text-white" />
</div>
</MatterBody>
<MatterBody
matterBodyOptions={{ friction: 0.2, restitution: 0.8, density: 0.001 }}
x="90%"
y="50%"
bodyType="circle"
>
<div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-rose-300 to-pink-400 rounded-full shadow-xl hover:cursor-grab">
<Sparkles className="w-8 h-8 text-white" />
</div>
</MatterBody>
{/* Geometric Icons */}
<MatterBody
matterBodyOptions={{ friction: 0.3, restitution: 0.6, density: 0.002 }}
x="25%"
y="50%"
>
<div className="p-4 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-lg shadow-xl hover:cursor-grab">
<Square className="w-10 h-10 text-white" />
</div>
</MatterBody>
<MatterBody
matterBodyOptions={{ friction: 0.3, restitution: 0.6, density: 0.002 }}
x="75%"
y="55%"
>
<div className="p-4 bg-gradient-to-br from-violet-400 to-purple-500 rounded-lg shadow-xl hover:cursor-grab">
<Triangle className="w-10 h-10 text-white" />
</div>
</MatterBody>
<MatterBody
matterBodyOptions={{ friction: 0.3, restitution: 0.6, density: 0.002 }}
x="50%"
y="48%"
bodyType="circle"
>
<div className="flex items-center justify-center w-20 h-20 bg-gradient-to-br from-green-400 to-teal-500 rounded-full shadow-xl hover:cursor-grab">
<Circle className="w-12 h-12 text-white" />
</div>
</MatterBody>
</Gravity>
{/* Bottom CTA */}
<div className="absolute bottom-10 left-0 right-0 z-10 text-center">
<p className="text-xl text-gray-600 mb-4">Drag and play with the elements!</p>
<a
href="http://45.61.58.125:9001"
className="inline-block px-8 py-4 text-lg font-semibold text-white bg-gradient-to-r from-blue-600 to-purple-600 rounded-full shadow-lg hover:shadow-xl transition-all hover:scale-105"
>
View Full Portfolio
</a>
</div>
</main>
);
}