import { motion } from "framer-motion";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Spider } from "lucide-react";
export default function SpiderManTheme() {
return (
<div className="min-h-screen bg-gradient-to-b from-red-700 to-blue-900 text-white font-sans">
{/* Hero Section */}
<header className="text-center py-12">
<motion.h1
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-5xl font-extrabold drop-shadow-lg"
>
🕷️ Spider-Man Inspired Website
</motion.h1>
<p className="mt-4 text-lg text-gray-200">
With great power, comes great responsibility.
</p>
</header>
{/* Content Section */}
<main className="grid gap-8 px-8 md:grid-cols-2 max-w-6xl mx-auto pb-16">
{/* Spider-Man Card */}
<motion.div
whileHover={{ scale: 1.05 }}
className=""
>
<Card className="bg-black/30 border-red-600 border-2 shadow-xl rounded-2xl">
<CardContent className="p-6">
<h2 className="text-3xl font-bold mb-4 flex items-center gap-2">
<Spider className="text-red-500" /> About Spider-Man
</h2>
<p className="text-gray-200">
Spider-Man is a fictional superhero created by writer Stan Lee and artist Steve Ditko.
He first appeared in Amazing Fantasy #15 in 1962. Known as Peter Parker, he was bitten by a
radioactive spider, granting him powers such as super strength, agility, wall-crawling,
and the famous spider-sense.
</p>
</CardContent>
</Card>
</motion.div>
{/* Real Spider Info Card */}
<motion.div
whileHover={{ scale: 1.05 }}
className=""
>
<Card className="bg-black/30 border-blue-600 border-2 shadow-xl rounded-2xl">
<CardContent className="p-6">
<h2 className="text-3xl font-bold mb-4 flex items-center gap-2">
<Spider className="text-blue-400" /> Learn About Real Spiders
</h2>
<p className="text-gray-200">
Spiders are arachnids, not insects. They have eight legs, fangs that inject venom, and
spinnerets that produce silk for building webs. Spiders play an important role in ecosystems
by controlling insect populations. Some species build intricate webs, while others hunt or ambush prey.
</p>
</CardContent>
</Card>
</motion.div>
</main>
{/* Footer */}
<footer className="text-center py-6 bg-black/40">
<p className="text-sm text-gray-300">
© 2025 Spider-Man Themed Website | Educational use only
</p>
<Button variant="outline" className="mt-3 bg-red-600 hover:bg-red-700 border-none">
Back to Top
</Button>
</footer>
</div>
);
}
.jpeg)
