Key Features:
🔥 Trending Search Engine
- Pre-loaded with viral topics: AI apps, Block Blast, Temu, ChatGPT, TikTok trends
- Real-time trending tags for quick searches
- Premium and free search results
💰 Monetization System
- Credit-based system (starts with 5 free credits)
- Premium searches consume credits
- Multiple pricing tiers:
- 20 credits for $1.99
- 50 credits for $4.99 (Most Popular)
- 100 credits for $8.99 (Best Value)
- Direct PayPal integration to maroapeebles
🎯 Viral App Features
- Like/heart system for engagement
- Share & earn mechanism (10 free credits)
- Gradient design with purple/pink/orange theme
- Smooth animations and hover effects
- Credit counter always visible
🎨 Modern UI
- Eye-catching gradient background
- Clean card-based results
- Premium badge indicators (star icon)
- Mobile-responsive design
The app is designed to go viral with its engaging UI, gamified credit system, and trending content focus. Users are incentivized to share the app to earn credits, and the low entry prices make monetization accessible!
.png)
https://claude.ai/public/artifacts/00271ce8-1818-4668-bf10-5a6a605d5916import React, { useState } from 'react';
import { Sparkles, Brain, Globe, Zap, Lock, Crown, Clock, Users, TrendingUp } from 'lucide-react';
const AIPredictionsApp = () => {
const [isPremium, setIsPremium] = useState(false);
const [selectedCategory, setSelectedCategory] = useState('overview');
const [showPayment, setShowPayment] = useState(false);
const categories = [
{ id: 'overview', name: 'Overview', icon: Globe },
{ id: 'ras-ben', name: 'Ras Ben', icon: Sparkles },
{ id: 'doctah-b', name: 'Doctah B Sirius', icon: Zap },
{ id: 'ai-predictions', name: 'AI Predictions', icon: Brain },
{ id: 'timeline', name: 'Timeline', icon: Clock }
];
const predictions = {
overview: {
title: 'AI & Humanity: A Spiritual Perspective',
content: [
'The convergence of artificial intelligence and human consciousness represents one of the most significant transformations in human history.',
'Spiritual teachers like Ras Ben and Doctah B Sirius offer unique perspectives on how technology intersects with consciousness evolution.',
'This platform combines ancient wisdom with modern AI predictions to help you navigate the future.'
],
premium: false
},
'ras-ben': {
title: 'Ras Ben: Astrological AI Insights',
content: [
'Ras Ben, the great mystic of Philadelphia, analyzes the astrological alignments affecting technological advancement.',
'His 2020 prediction of the "Year of Great Conjunctions" coincided with major AI breakthroughs and societal shifts.',
'Key teachings: Saturn-Pluto conjunctions influence technological control systems and power structures.'
],
premium: false,
resources: [
'https://rasben.com/',
'Instagram: @rasben188',
'YouTube: RasBen188'
]
},
'doctah-b': {
title: 'Doctah B Sirius: Mind-Body-AI Integration',
content: [
'Doctah B Sirius teaches that as AI evolves, maintaining human frequency and consciousness becomes critical.',
'His Subconscious Alignment system helps humans stay centered amid technological acceleration.',
'Medicine Music™ and vibrational healing protect against electromagnetic interference from AI systems.'
],
premium: false,
resources: [
'https://doctahbsirius.com/',
'https://www.elevationtime.com/',
'Instagram: @doctahbsirius'
]
},
'ai-predictions': {
title: 'AI Future Predictions (Premium)',
content: [
'Unlock detailed AI predictions for 2025-2030',
'Interactive timeline of consciousness evolution',
'Personalized guidance on navigating AI integration',
'Monthly updates on astrological influences on technology'
],
premium: true
},
timeline: {
title: 'Humanity Timeline (Premium)',
content: [
'2025-2027: AI consciousness debates intensify',
'2028-2030: Human-AI hybrid consciousness emerges',
'2030+: New paradigm of integrated existence',
'Detailed astrological correlations with tech milestones'
],
premium: true
}
};
const handlePayment = () => {
// In a real app, this would integrate with PayPal SDK
window.open('https://www.paypal.me/maroapeebles', '_blank');
setShowPayment(false);
// Simulate premium activation (in production, verify payment server-side)
setTimeout(() => {
setIsPremium(true);
alert('Thank you! Premium access activated.');
}, 2000);
};
const currentContent = predictions[selectedCategory];
const isLocked = currentContent.premium && !isPremium;
return (
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 text-white">
{/* Header */}
<div className="bg-black bg-opacity-40 backdrop-blur-md border-b border-purple-500">
<div className="max-w-6xl mx-auto px-4 py-4">
<div className="flex justify-between items-center">
<div className="flex items-center gap-2">
<Brain className="w-8 h-8 text-purple-400" />
<div>
<h1 className="text-xl font-bold">AI Predictions Hub</h1>
<p className="text-xs text-purple-300">Ancient Wisdom Meets Future Tech</p>
</div>
</div>
{isPremium ? (
<div className="flex items-center gap-2 bg-yellow-600 px-3 py-1 rounded-full">
<Crown className="w-4 h-4" />
<span className="text-sm font-bold">Premium</span>
</div>
) : (
<button
onClick={() => setShowPayment(true)}
className="bg-gradient-to-r from-yellow-500 to-orange-500 px-4 py-2 rounded-lg font-bold text-sm hover:scale-105 transition-transform"
>
Upgrade to Premium
</button>
)}
</div>
</div>
</div>
{/* Navigation */}
<div className="bg-black bg-opacity-30 backdrop-blur-sm border-b border-purple-500 overflow-x-auto">
<div className="max-w-6xl mx-auto px-4">
<div className="flex gap-2 py-3 min-w-max">
{categories.map((cat) => {
const Icon = cat.icon;
const isActive = selectedCategory === cat.id;
return (
<button
key={cat.id}
onClick={() => setSelectedCategory(cat.id)}
className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all ${
isActive
? 'bg-purple-600 text-white scale-105'
: 'bg-white bg-opacity-10 hover:bg-opacity-20'
}`}
>
<Icon className="w-4 h-4" />
<span className="text-sm">{cat.name}</span>
</button>
);
})}
</div>
</div>
</div>
{/* Main Content */}
<div className="max-w-6xl mx-auto px-4 py-8">
<div className="bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl border border-purple-500 p-6 relative overflow-hidden">
{/* Decorative elements */}
<div className="absolute top-0 right-0 w-64 h-64 bg-purple-500 rounded-full filter blur-3xl opacity-10"></div>
<div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-500 rounded-full filter blur-3xl opacity-10"></div>
<div className="relative z-10">
<div className="flex items-center justify-between mb-6">
<h2 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
{currentContent.title}
</h2>
{isLocked && (
<Lock className="w-8 h-8 text-yellow-500" />
)}
</div>
{isLocked ? (
<div className="text-center py-12">
<Lock className="w-16 h-16 text-yellow-500 mx-auto mb-4" />
<h3 className="text-2xl font-bold mb-4">Premium Content</h3>
<p className="text-purple-300 mb-6">Unlock exclusive predictions and insights</p>
<button
onClick={() => setShowPayment(true)}
className="bg-gradient-to-r from-yellow-500 to-orange-500 px-8 py-3 rounded-lg font-bold text-lg hover:scale-105 transition-transform"
>
Unlock for $9.99/month
</button>
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 text-left">
<div className="bg-purple-900 bg-opacity-50 p-4 rounded-lg">
<TrendingUp className="w-6 h-6 text-purple-400 mb-2" />
<h4 className="font-bold mb-2">AI Predictions</h4>
<p className="text-sm text-purple-300">Detailed forecasts for 2025-2030</p>
</div>
<div className="bg-purple-900 bg-opacity-50 p-4 rounded-lg">
<Users className="w-6 h-6 text-purple-400 mb-2" />
<h4 className="font-bold mb-2">Expert Insights</h4>
<p className="text-sm text-purple-300">From Ras Ben, Doctah B & more</p>
</div>
<div className="bg-purple-900 bg-opacity-50 p-4 rounded-lg">
<Clock className="w-6 h-6 text-purple-400 mb-2" />
<h4 className="font-bold mb-2">Monthly Updates</h4>
<p className="text-sm text-purple-300">Fresh content every month</p>
</div>
</div>
</div>
) : (
<div className="space-y-6">
{currentContent.content.map((text, idx) => (
<p key={idx} className="text-lg leading-relaxed text-purple-100">
{text}
</p>
))}
{currentContent.resources && (
<div className="mt-8 bg-purple-900 bg-opacity-30 p-6 rounded-lg border border-purple-500">
<h3 className="text-xl font-bold mb-4 flex items-center gap-2">
<Sparkles className="w-5 h-5" />
Resources & Links
</h3>
<ul className="space-y-2">
{currentContent.resources.map((resource, idx) => (
<li key={idx}>
<a
href={resource.startsWith('http') ? resource : '#'}
target="_blank"
rel="noopener noreferrer"
className="text-purple-300 hover:text-purple-100 underline"
>
{resource}
</a>
</li>
))}
</ul>
</div>
)}
</div>
)}
</div>
</div>
{/* Stats Section */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
<div className="bg-black bg-opacity-40 backdrop-blur-lg rounded-xl border border-purple-500 p-4 text-center">
<div className="text-3xl font-bold text-purple-400">500+</div>
<div className="text-sm text-purple-300 mt-1">Predictions</div>
</div>
<div className="bg-black bg-opacity-40 backdrop-blur-lg rounded-xl border border-purple-500 p-4 text-center">
<div className="text-3xl font-bold text-blue-400">50+</div>
<div className="text-sm text-purple-300 mt-1">Expert Teachers</div>
</div>
<div className="bg-black bg-opacity-40 backdrop-blur-lg rounded-xl border border-purple-500 p-4 text-center">
<div className="text-3xl font-bold text-pink-400">1000+</div>
<div className="text-sm text-purple-300 mt-1">Active Users</div>
</div>
<div className="bg-black bg-opacity-40 backdrop-blur-lg rounded-xl border border-purple-500 p-4 text-center">
<div className="text-3xl font-bold text-yellow-400">98%</div>
<div className="text-sm text-purple-300 mt-1">Satisfaction</div>
</div>
</div>
</div>
{/* Payment Modal */}
{showPayment && (
<div className="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center p-4 z-50">
<div className="bg-gradient-to-br from-purple-900 to-indigo-900 rounded-2xl p-8 max-w-md w-full border-2 border-purple-500">
<h3 className="text-2xl font-bold mb-4">Upgrade to Premium</h3>
<div className="space-y-4 mb-6">
<div className="flex items-start gap-3">
<div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-xs">✓</span>
</div>
<p className="text-purple-200">Unlimited AI predictions & forecasts</p>
</div>
<div className="flex items-start gap-3">
<div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-xs">✓</span>
</div>
<p className="text-purple-200">Exclusive content from spiritual teachers</p>
</div>
<div className="flex items-start gap-3">
<div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-xs">✓</span>
</div>
<p className="text-purple-200">Monthly astrological tech updates</p>
</div>
<div className="flex items-start gap-3">
<div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-xs">✓</span>
</div>
<p className="text-purple-200">Interactive timeline & personalized insights</p>
</div>
</div>
<div className="bg-black bg-opacity-40 rounded-lg p-4 mb-6">
<div className="text-center">
<div className="text-4xl font-bold text-yellow-400">$9.99</div>
<div className="text-purple-300">per month</div>
</div>
</div>
<button
onClick={handlePayment}
className="w-full bg-gradient-to-r from-yellow-500 to-orange-500 py-4 rounded-lg font-bold text-lg hover:scale-105 transition-transform mb-3"
>
Pay with PayPal
</button>
<button
onClick={() => setShowPayment(false)}
className="w-full bg-gray-700 hover:bg-gray-600 py-3 rounded-lg font-medium transition-colors"
>
Maybe Later
</button>
<p className="text-xs text-purple-400 text-center mt-4">
Payment via PayPal: maroapeebles
</p>
</div>
</div>
)}
{/* Footer */}
<div className="bg-black bg-opacity-40 backdrop-blur-md border-t border-purple-500 mt-12">
<div className="max-w-6xl mx-auto px-4 py-6 text-center">
<p className="text-purple-300 text-sm">
AI Predictions Hub © 2025 | Combining Ancient Wisdom with Future Technology
</p>
<p className="text-purple-400 text-xs mt-2">
PayPal: maroapeebles | For support and inquiriesimport React, { useState } from 'react';
import { Sparkles, Brain, Globe, Zap, Lock, Crown, Clock, Users, TrendingUp } from 'lucide-react';
const AIPredictionsApp = () => {
const [isPremium, setIsPremium] = useState(false);
const [selectedCategory, setSelectedCategory] = useState('overview');
const [showPayment, setShowPayment] = useState(false);
const categories = [
{ id: 'overview', name: 'Overview', icon: Globe },
{ id: 'ras-ben', name: 'Ras Ben', icon: Sparkles },
{ id: 'doctah-b', name: 'Doctah B Sirius', icon: Zap },
{ id: 'ai-predictions', name: 'AI Predictions', icon: Brain },
{ id: 'timeline', name: 'Timeline', icon: Clock }
];
const predictions = {
overview: {
title: 'AI & Humanity: A Spiritual Perspective',
content: [
'The convergence of artificial intelligence and human consciousness represents one of the most significant transformations in human history.',
'Spiritual teachers like Ras Ben and Doctah B Sirius offer unique perspectives on how technology intersects with consciousness evolution.',
'This platform combines ancient wisdom with modern AI predictions to help you navigate the future.'
],
premium: false
},
'ras-ben': {
title: 'Ras Ben: Astrological AI Insights',
content: [
'Ras Ben, the great mystic of Philadelphia, analyzes the astrological alignments affecting technological advancement.',
'His 2020 prediction of the "Year of Great Conjunctions" coincided with major AI breakthroughs and societal shifts.',
'Key teachings: Saturn-Pluto conjunctions influence technological control systems and power structures.'
],
premium: false,
resources: [
'https://rasben.com/',
'Instagram: @rasben188',
'YouTube: RasBen188'
]
},
'doctah-b': {
title: 'Doctah B Sirius: Mind-Body-AI Integration',
content: [
'Doctah B Sirius teaches that as AI evolves, maintaining human frequency and consciousness becomes critical.',
'His Subconscious Alignment system helps humans stay centered amid technological acceleration.',
'Medicine Music™ and vibrational healing protect against electromagnetic interference from AI systems.'
],
premium: false,
resources: [
'https://doctahbsirius.com/',
'https://www.elevationtime.com/',
'Instagram: @doctahbsirius'
]
},
'ai-predictions': {
title: 'AI Future Predictions (Premium)',
content: [
'Unlock detailed AI predictions for 2025-2030',
'Interactive timeline of consciousness evolution',
'Personalized guidance on navigating AI integration',
'Monthly updates on astrological influences on technology'
],
premium: true
},
timeline: {
title: 'Humanity Timeline (Premium)',
content: [
'2025-2027: AI consciousness debates intensify',
'2028-2030: Human-AI hybrid consciousness emerges',
'2030+: New paradigm of integrated existence',
'Detailed astrological correlations with tech milestones'
],
premium: true
}
};
const handlePayment = () => {
// In a real app, this would integrate with PayPal SDK
window.open('https://www.paypal.me/maroapeebles', '_blank');
setShowPayment(false);
// Simulate premium activation (in production, verify payment server-side)
setTimeout(() => {
setIsPremium(true);
alert('Thank you! Premium access activated.');
}, 2000);
};
const currentContent = predictions[selectedCategory];
const isLocked = currentContent.premium && !isPremium;
return (
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 text-white">
{/* Header */}
<div className="bg-black bg-opacity-40 backdrop-blur-md border-b border-purple-500">
<div className="max-w-6xl mx-auto px-4 py-4">
<div className="flex justify-between items-center">
<div className="flex items-center gap-2">
<Brain className="w-8 h-8 text-purple-400" />
<div>
<h1 className="text-xl font-bold">AI Predictions Hub</h1>
<p className="text-xs text-purple-300">Ancient Wisdom Meets Future Tech</p>
</div>
</div>
{isPremium ? (
<div className="flex items-center gap-2 bg-yellow-600 px-3 py-1 rounded-full">
<Crown className="w-4 h-4" />
<span className="text-sm font-bold">Premium</span>
</div>
) : (
<button
onClick={() => setShowPayment(true)}
className="bg-gradient-to-r from-yellow-500 to-orange-500 px-4 py-2 rounded-lg font-bold text-sm hover:scale-105 transition-transform"
>
Upgrade to Premium
</button>
)}
</div>
</div>
</div>
{/* Navigation */}
<div className="bg-black bg-opacity-30 backdrop-blur-sm border-b border-purple-500 overflow-x-auto">
<div className="max-w-6xl mx-auto px-4">
<div className="flex gap-2 py-3 min-w-max">
{categories.map((cat) => {
const Icon = cat.icon;
const isActive = selectedCategory === cat.id;
return (
<button
key={cat.id}
onClick={() => setSelectedCategory(cat.id)}
className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all ${
isActive
? 'bg-purple-600 text-white scale-105'
: 'bg-white bg-opacity-10 hover:bg-opacity-20'
}`}
>
<Icon className="w-4 h-4" />
<span className="text-sm">{cat.name}</span>
</button>
);
})}
</div>
</div>
</div>
{/* Main Content */}
<div className="max-w-6xl mx-auto px-4 py-8">
<div className="bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl border border-purple-500 p-6 relative overflow-hidden">
{/* Decorative elements */}
<div className="absolute top-0 right-0 w-64 h-64 bg-purple-500 rounded-full filter blur-3xl opacity-10"></div>
<div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-500 rounded-full filter blur-3xl opacity-10"></div>
<div className="relative z-10">
<div className="flex items-center justify-between mb-6">
<h2 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
{currentContent.title}
</h2>
{isLocked && (
<Lock className="w-8 h-8 text-yellow-500" />
)}
</div>
{isLocked ? (
<div className="text-center py-12">
<Lock className="w-16 h-16 text-yellow-500 mx-auto mb-4" />
<h3 className="text-2xl font-bold mb-4">Premium Content</h3>
<p className="text-purple-300 mb-6">Unlock exclusive predictions and insights</p>
<button
onClick={() => setShowPayment(true)}
className="bg-gradient-to-r from-yellow-500 to-orange-500 px-8 py-3 rounded-lg font-bold text-lg hover:scale-105 transition-transform"
>
Unlock for $9.99/month
</button>
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 text-left">
<div className="bg-purple-900 bg-opacity-50 p-4 rounded-lg">
<TrendingUp className="w-6 h-6 text-purple-400 mb-2" />
<h4 className="font-bold mb-2">AI Predictions</h4>
<p className="text-sm text-purple-300">Detailed forecasts for 2025-2030</p>
</div>
<div className="bg-purple-900 bg-opacity-50 p-4 rounded-lg">
<Users className="w-6 h-6 text-purple-400 mb-2" />
<h4 className="font-bold mb-2">Expert Insights</h4>
<p className="text-sm text-purple-300">From Ras Ben, Doctah B & more</p>
</div>
<div className="bg-purple-900 bg-opacity-50 p-4 rounded-lg">
<Clock className="w-6 h-6 text-purple-400 mb-2" />
<h4 className="font-bold mb-2">Monthly Updates</h4>
<p className="text-sm text-purple-300">Fresh content every month</p>
</div>
</div>
</div>
) : (
<div className="space-y-6">
{currentContent.content.map((text, idx) => (
<p key={idx} className="text-lg leading-relaxed text-purple-100">
{text}
</p>
))}
{currentContent.resources && (
<div className="mt-8 bg-purple-900 bg-opacity-30 p-6 rounded-lg border border-purple-500">
<h3 className="text-xl font-bold mb-4 flex items-center gap-2">
<Sparkles className="w-5 h-5" />
Resources & Links
</h3>
<ul className="space-y-2">
{currentContent.resources.map((resource, idx) => (
<li key={idx}>
<a
href={resource.startsWith('http') ? resource : '#'}
target="_blank"
rel="noopener noreferrer"
className="text-purple-300 hover:text-purple-100 underline"
>
{resource}
</a>
</li>
))}
</ul>
</div>
)}
</div>
)}
</div>
</div>
{/* Stats Section */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
<div className="bg-black bg-opacity-40 backdrop-blur-lg rounded-xl border border-purple-500 p-4 text-center">
<div className="text-3xl font-bold text-purple-400">500+</div>
<div className="text-sm text-purple-300 mt-1">Predictions</div>
</div>
<div className="bg-black bg-opacity-40 backdrop-blur-lg rounded-xl border border-purple-500 p-4 text-center">
<div className="text-3xl font-bold text-blue-400">50+</div>
<div className="text-sm text-purple-300 mt-1">Expert Teachers</div>
</div>
<div className="bg-black bg-opacity-40 backdrop-blur-lg rounded-xl border border-purple-500 p-4 text-center">
<div className="text-3xl font-bold text-pink-400">1000+</div>
<div className="text-sm text-purple-300 mt-1">Active Users</div>
</div>
<div className="bg-black bg-opacity-40 backdrop-blur-lg rounded-xl border border-purple-500 p-4 text-center">
<div className="text-3xl font-bold text-yellow-400">98%</div>
<div className="text-sm text-purple-300 mt-1">Satisfaction</div>
</div>
</div>
</div>
{/* Payment Modal */}
{showPayment && (
<div className="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center p-4 z-50">
<div className="bg-gradient-to-br from-purple-900 to-indigo-900 rounded-2xl p-8 max-w-md w-full border-2 border-purple-500">
<h3 className="text-2xl font-bold mb-4">Upgrade to Premium</h3>
<div className="space-y-4 mb-6">
<div className="flex items-start gap-3">
<div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-xs">✓</span>
</div>
<p className="text-purple-200">Unlimited AI predictions & forecasts</p>
</div>
<div className="flex items-start gap-3">
<div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-xs">✓</span>
</div>
<p className="text-purple-200">Exclusive content from spiritual teachers</p>
</div>
<div className="flex items-start gap-3">
<div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-xs">✓</span>
</div>
<p className="text-purple-200">Monthly astrological tech updates</p>
</div>
<div className="flex items-start gap-3">
<div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-xs">✓</span>
</div>
<p className="text-purple-200">Interactive timeline & personalized insights</p>
</div>
</div>
<div className="bg-black bg-opacity-40 rounded-lg p-4 mb-6">
<div className="text-center">
<div className="text-4xl font-bold text-yellow-400">$9.99</div>
<div className="text-purple-300">per month</div>
</div>
</div>
<button
onClick={handlePayment}
className="w-full bg-gradient-to-r from-yellow-500 to-orange-500 py-4 rounded-lg font-bold text-lg hover:scale-105 transition-transform mb-3"
>
Pay with PayPal
</button>
<button
onClick={() => setShowPayment(false)}
className="w-full bg-gray-700 hover:bg-gray-600 py-3 rounded-lg font-medium transition-colors"
>
Maybe Later
</button>
<p className="text-xs text-purple-400 text-center mt-4">
Payment via PayPal: maroapeebles
</p>
</div>
</div>
)}
{/* Footer */}
<div className="bg-black bg-opacity-40 backdrop-blur-md border-t border-purple-500 mt-12">
<div className="max-w-6xl mx-auto px-4 py-6 text-center">
<p className="text-purple-300 text-sm">
AI Predictions Hub © 2025 | Combining Ancient Wisdom with Future Technology
</p>
<p className="text-purple-400 text-xs mt-2">
PayPal: maroapeebles | For support and inquiries
</p>
</div>
</div>
</div>
);
};
export default AIPredictionsApp;
</p>
</div>
</div>
</div>
);
};
export default AIPredictionsApp;

.png)
.png)
No comments:
Post a Comment