import React, { useState, useEffect } from 'react';
import { Button } from "@/components/ui/button";
import {
Globe2,
MousePointer2,
Rocket,
Zap,
ArrowRight,
Menu,
X
} from 'lucide-react';
const Navigation = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<nav className="fixed w-full z-50 bg-black text-white">
<div className="container mx-auto px-4">
<div className="flex items-center justify-between h-20">
<div className="flex items-center">
<span className="text-2xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
DOMAIN<span className="text-white">PRO</span>
</span>
</div>
{/* Desktop Menu */}
<div className="hidden md:flex items-center space-x-8">
{['Home', 'Services', 'Portfolio', 'Contact'].map((item) => (
<a
key={item}
href={`#${item.toLowerCase()}`}
className="text-lg font-medium hover:text-purple-500 transition-colors duration-300"
>
{item}
</a>
))}
<Button className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white">
Get Started
</Button>
</div>
{/* Mobile Menu Button */}
<div className="md:hidden">
<button onClick={() => setIsOpen(!isOpen)} className="text-white">
{isOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
</div>
{/* Mobile Menu */}
{isOpen && (
<div className="md:hidden">
<div className="px-2 pt-2 pb-3 space-y-1">
{['Home', 'Services', 'Portfolio', 'Contact'].map((item) => (
<a
key={item}
href={`#${item.toLowerCase()}`}
className="block px-3 py-2 text-white hover:bg-purple-500 rounded-md"
>
{item}
</a>
))}
<Button className="w-full mt-4 bg-gradient-to-r from-purple-500 to-pink-500">
Get Started
</Button>
</div>
</div>
)}
</div>
</nav>
);
};
const Hero = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(prev => (prev + 1) % 1000);
}, 100);
return () => clearInterval(timer);
}, []);
return (
<div className="min-h-screen bg-black text-white pt-20">
<div className="container mx-auto px-4 py-20">
<div className="grid md:grid-cols-2 gap-12 items-center">
<div>
<h1 className="text-5xl md:text-7xl font-bold mb-6">
<span className="bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
Dominate
</span>
<br />
Your Digital
<br />
Territory
</h1>
<p className="text-xl md:text-2xl mb-8 text-gray-400">
Bulk domain acquisition reimagined for the digital age
</p>
<div className="flex flex-wrap gap-4">
<Button size="lg" className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600">
Start Conquering <ArrowRight className="ml-2" />
</Button>
<Button size="lg" variant="outline" className="border-purple-500 text-purple-500 hover:bg-purple-500 hover:text-white">
Watch Demo
</Button>
</div>
</div>
<div className="relative">
<div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full blur-3xl opacity-20 animate-pulse"></div>
<div className="relative">
<div className="aspect-square rounded-full border-4 border-gray-800 flex items-center justify-center">
<Globe2 size={200} className="text-purple-500 animate-spin-slow" />
</div>
<div className="absolute top-0 right-0 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full p-4">
<div className="text-2xl font-bold">{count}+</div>
<div className="text-sm">Domains</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
const Services = () => {
const services = [
{
icon: <Rocket className="w-12 h-12" />,
title: "Bulk Acquisition",
description: "Secure multiple premium domains in one swift move"
},
{
icon: <MousePointer2 className="w-12 h-12" />,
title: "Smart Portfolio",
description: "AI-powered domain management and optimization"
},
{
icon: <Zap className="w-12 h-12" />,
title: "Instant Valuation",
description: "Real-time market analysis and domain appraisals"
}
];
return (
<div className="bg-black text-white py-20">
<div className="container mx-auto px-4">
<h2 className="text-4xl md:text-5xl font-bold text-center mb-16">
<span className="bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
Our Services
</span>
</h2>
<div className="grid md:grid-cols-3 gap-8">
{services.map((service, index) => (
<div
key={index}
className="bg-gray-900 p-8 rounded-2xl hover:bg-gray-800 transition-all duration-300 transform hover:-translate-y-2"
>
<div className="text-purple-500 mb-6">{service.icon}</div>
<h3 className="text-2xl font-bold mb-4">{service.title}</h3>
<p className="text-gray-400">{service.description}</p>
</div>
))}
</div>
</div>
</div>
);
};
const Stats = () => {
const stats = [
{ number: "10K+", label: "Domains Acquired" },
{ number: "98%", label: "Success Rate" },
{ number: "24/7", label: "Support" },
{ number: "500+", label: "Happy Clients" }
];
return (
<div className="bg-gradient-to-r from-purple-500 to-pink-500 py-20">
<div className="container mx-auto px-4">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
{stats.map((stat, index) => (
<div key={index} className="text-center">
<div className="text-4xl md:text-6xl font-bold text-white mb-2">
{stat.number}
</div>
<div className="text-white text-opacity-80">{stat.label}</div>
</div>
))}
</div>
</div>
</div>
);
};
const Portfolio = () => {
const domains = [
"tech.io", "crypto.net", "ai.app", "meta.com", "future.io", "smart.tech"
];
return (
<div className="bg-black text-white py-20">
<div className="container mx-auto px-4">
<h2 className="text-4xl md:text-5xl font-bold text-center mb-16">
Featured
<span className="bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
{" "}Domains
</span>
</h2>
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
{domains.map((domain, index) => (
<div
key={index}
className="bg-gray-900 p-6 rounded-xl hover:bg-gray-800 transition-all duration-300"
>
<h3 className="text-2xl font-bold text-purple-500">{domain}</h3>
<Button className="mt-4 w-full bg-gradient-to-r from-purple-500 to-pink-500">
View Details
</Button>
</div>
))}
</div>
</div>
</div>
);
};
const Contact = () => {
return (
<div className="bg-black text-white py-20">
<div className="container mx-auto px-4">
<div className="max-w-2xl mx-auto text-center">
<h2 className="text-4xl md:text-5xl font-bold mb-8">
Ready to
<span className="bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">
{" "}Dominate?
</span>
</h2>
<p className="text-gray-400 mb-8">
Get in touch and let's build your digital empire together
</p>
<Button size="lg" className="bg-gradient-to-r from-purple-500 to-pink-500">
Contact Us Now
</Button>
</div>
</div>
</div>
);
};
const Footer = () => (
<footer className="bg-gray-900 text-white py-12">
<div className="container mx-auto px-4">
<div className="text-center">
<div className="text-2xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent mb-4">
DOMAINPRO
</div>
<div className="flex justify-center space-x-6 mb-8">
{['Twitter', 'LinkedIn', 'GitHub'].map((social) => (
<a
key={social}
href="#"
className="text-gray-400 hover:text-purple-500 transition-colors"
>
{social}
</a>
))}
</div>
<div className="text-gray-400">
© 2024 DomainPro. All rights reserved.
</div>
</div>
</div>
</footer>
);
const App = () => {
return (
<div className="min-h-screen bg-black">
<Navigation />
<Hero />
<Services />
<Stats />
<Portfolio />
<Contact />
<Footer />
</div>
);
};
export default App;