import React, { useState, useEffect } from ‘react’;
import {
TrendingUp,
Target,
Users,
Clock,
CheckCircle,
Star,
ArrowRight,
Phone,
Mail,
Building,
Calendar,
Award,
BarChart3,
MessageCircle,
Zap,
Shield,
DollarSign,
PlayCircle,
ChevronDown,
ChevronUp
} from ‘lucide-react’;
function App() {
const [timeLeft, setTimeLeft] = useState({
days: 0,
hours: 23,
minutes: 47,
seconds: 32
});
const [expandedFaq, setExpandedFaq] = useState(null);
// Countdown timer effect
useEffect(() => {
const timer = setInterval(() => {
setTimeLeft(prev => {
if (prev.seconds > 0) {
return { …prev, seconds: prev.seconds – 1 };
} else if (prev.minutes > 0) {
return { …prev, minutes: prev.minutes – 1, seconds: 59 };
} else if (prev.hours > 0) {
return { …prev, hours: prev.hours – 1, minutes: 59, seconds: 59 };
}
return prev;
});
}, 1000);
return () => clearInterval(timer);}, []);
const [formData, setFormData] = useState({
name: ”,
whatsapp: ”,
email: ”,
propertyName: ”,
monthlyOccupancy: ”
});
const handleInputChange = (e: React.ChangeEvent) => {
setFormData({
…formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// Handle form submission here
console.log(‘Form submitted:’, formData);
alert(‘Thank you! We\’ll contact you within 24 hours to schedule your free strategy call.’);
};
const toggleFaq = (index: number) => {
setExpandedFaq(expandedFaq === index ? null : index);
};
return (
{/* Hero Section */}
✓ Proven Results • ✓ No OTA Commissions • ✓ 15-20+ Direct Bookings Monthly
<h1 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
Build & Scale a <span className="text-orange-400">6-Figure Booking System</span> for Your Resort/Hotel Using Meta Ads in 21-45 Days
</h1>
<p className="text-xl md:text-2xl mb-8 text-blue-100 max-w-4xl mx-auto">
Stop losing money to OTA commissions. Get 15-20+ direct bookings every month using proven Meta Ads systems specifically designed for Indian resorts, hotels, and homestays.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
<button className="bg-orange-500 hover:bg-orange-600 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
<PlayCircle className="w-5 h-5 inline mr-2" />
Book Your Free Strategy Call Now
</button>
<div className="text-blue-200 text-sm">
⚡ Free 15-min call • No commitment required
</div>
</div>
{/* Trust Badges */}
<div className="flex flex-wrap justify-center items-center gap-8 opacity-80">
<div className="flex items-center space-x-2">
<Award className="w-5 h-5 text-yellow-400" />
<span className="text-sm">Featured in Hospitality Growth Leaders 2024</span>
</div>
<div className="flex items-center space-x-2">
<Star className="w-5 h-5 text-yellow-400" />
<span className="text-sm">4.9/5 Client Satisfaction</span>
</div>
<div className="flex items-center space-x-2">
<Users className="w-5 h-5 text-green-400" />
<span className="text-sm">200+ Properties Served</span>
</div>
</div>
</div>
</section>
{/* Problem Section */}
<section className="py-20 px-4 bg-gray-50">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
Why Most Resorts & Hotels Struggle to Get Direct Bookings
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
The harsh reality is that 90% of properties are stuck in the OTA trap, losing 15-25% of their revenue to commissions while having zero control over their guest relationships.
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="bg-white rounded-lg p-6 shadow-lg border-l-4 border-red-500">
<div className="bg-red-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
<DollarSign className="w-6 h-6 text-red-600" />
</div>
<h3 className="text-xl font-semibold mb-3 text-gray-900">High OTA Commissions</h3>
<p className="text-gray-600">Paying 15-25% commission on every booking while guests book directly with OTAs, not you.</p>
</div>
<div className="bg-white rounded-lg p-6 shadow-lg border-l-4 border-red-500">
<div className="bg-red-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
<Target className="w-6 h-6 text-red-600" />
</div>
<h3 className="text-xl font-semibold mb-3 text-gray-900">No Direct Marketing</h3>
<p className="text-gray-600">Relying completely on OTAs with no strategy to attract guests directly to your property.</p>
</div>
<div className="bg-white rounded-lg p-6 shadow-lg border-l-4 border-red-500">
<div className="bg-red-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
<Users className="w-6 h-6 text-red-600" />
</div>
<h3 className="text-xl font-semibold mb-3 text-gray-900">Zero Guest Control</h3>
<p className="text-gray-600">No access to guest data, no repeat bookings, no relationship building with your customers.</p>
</div>
</div>
<div className="text-center mt-12">
<div className="bg-blue-900 text-white rounded-lg p-8 max-w-4xl mx-auto">
<h3 className="text-2xl font-bold mb-4">Meta Ads Changes Everything</h3>
<p className="text-lg text-blue-100">
With the right Meta Ads strategy, you can reach your ideal guests directly on Facebook & Instagram,
build relationships, and convert them into direct bookings - all without paying a single rupee in OTA commissions.
</p>
</div>
</div>
</div>
</section>
{/* Solution Section */}
<section className="py-20 px-4 bg-white">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
How My Meta Ads System Transforms Your Booking Game
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
A complete direct booking system that attracts, converts, and retains guests while eliminating OTA dependency.
</p>
</div>
<div className="grid md:grid-cols-2 gap-12 items-center">
<div className="space-y-8">
<div className="flex items-start space-x-4">
<div className="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0">
<TrendingUp className="w-6 h-6 text-green-600" />
</div>
<div>
<h3 className="text-xl font-semibold mb-2 text-gray-900">Get 15-20+ Direct Bookings Monthly</h3>
<p className="text-gray-600">Consistent flow of qualified inquiries from travelers who want to book directly with you.</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0">
<Shield className="w-6 h-6 text-green-600" />
</div>
<div>
<h3 className="text-xl font-semibold mb-2 text-gray-900">Stop Paying High OTA Commissions</h3>
<p className="text-gray-600">Keep 100% of your booking revenue instead of giving 15-25% to OTAs.</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0">
<Users className="w-6 h-6 text-green-600" />
</div>
<div>
<h3 className="text-xl font-semibold mb-2 text-gray-900">Get High-Quality Inquiries</h3>
<p className="text-gray-600">Attract guests who value your property and are ready to pay premium rates.</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0">
<Zap className="w-6 h-6 text-green-600" />
</div>
<div>
<h3 className="text-xl font-semibold mb-2 text-gray-900">Automated System That Works 24/7</h3>
<p className="text-gray-600">Set it once and let it generate bookings even while you sleep.</p>
</div>
</div>
</div>
<div className="bg-gradient-to-br from-blue-50 to-orange-50 rounded-lg p-8">
<div className="text-center">
<div className="bg-white rounded-lg p-6 shadow-lg mb-6">
<BarChart3 className="w-16 h-16 text-blue-600 mx-auto mb-4" />
<h3 className="text-2xl font-bold text-gray-900 mb-2">Average Results</h3>
<div className="grid grid-cols-2 gap-4 text-center">
<div>
<div className="text-3xl font-bold text-green-600">18</div>
<div className="text-sm text-gray-600">Direct Bookings/Month</div>
</div>
<div>
<div className="text-3xl font-bold text-orange-600">₹2.3L</div>
<div className="text-sm text-gray-600">Monthly Revenue</div>
</div>
</div>
</div>
<p className="text-gray-600 italic">
"Results may vary based on property type, location, and implementation. Individual results not guaranteed."
</p>
</div>
</div>
</div>
</div>
</section>
{/* What They Get Section */}
<section className="py-20 px-4 bg-gray-50">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
What You Get on Your Free 15-Minute Strategy Call
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
This isn't a sales pitch. It's a genuine audit of your current booking system with actionable insights you can implement immediately.
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<div className="bg-white rounded-lg p-6 shadow-lg text-center">
<div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<BarChart3 className="w-8 h-8 text-blue-600" />
</div>
<h3 className="text-xl font-semibold mb-3 text-gray-900">Booking System Audit</h3>
<p className="text-gray-600">Complete analysis of your current booking process and where you're losing potential guests.</p>
</div>
<div className="bg-white rounded-lg p-6 shadow-lg text-center">
<div className="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<Target className="w-8 h-8 text-green-600" />
</div>
<h3 className="text-xl font-semibold mb-3 text-gray-900">Custom Roadmap</h3>
<p className="text-gray-600">Step-by-step plan to get consistent direct bookings specific to your property type and location.</p>
</div>
<div className="bg-white rounded-lg p-6 shadow-lg text-center">
<div className="bg-orange-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<MessageCircle className="w-8 h-8 text-orange-600" />
</div>
<h3 className="text-xl font-semibold mb-3 text-gray-900">Q&A Session</h3>
<p className="text-gray-600">Get all your questions answered about Meta Ads, budgets, and implementation.</p>
</div>
<div className="bg-white rounded-lg p-6 shadow-lg text-center">
<div className="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<Phone className="w-8 h-8 text-purple-600" />
</div>
<h3 className="text-xl font-semibold mb-3 text-gray-900">WhatsApp System Demo</h3>
<p className="text-gray-600">See exactly how our automated WhatsApp follow-up system converts inquiries into bookings.</p>
</div>
</div>
<div className="text-center mt-12">
<button className="bg-orange-500 hover:bg-orange-600 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
Book Your Free Strategy Call Now
</button>
<p className="text-gray-600 mt-4">✓ No commitment required • ✓ Genuine advice • ✓ Action plan included</p>
</div>
</div>
</section>
{/* Success Stories Section */}
<section className="py-20 px-4 bg-white">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
Real Results from Real Properties
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
See how other resort and hotel owners are getting consistent direct bookings using our proven Meta Ads system.
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{/* Success Story 1 */}
<div className="bg-gray-50 rounded-lg p-6 shadow-lg">
<div className="bg-green-100 rounded-lg p-4 mb-4">
<div className="text-sm text-gray-600 mb-2">Meta Ads Manager Results</div>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-700">Amount Spent:</span>
<span className="font-semibold">₹4,560</span>
</div>
<div className="flex justify-between">
<span className="text-gray-700">Leads Generated:</span>
<span className="font-semibold text-green-600">37</span>
</div>
<div className="flex justify-between">
<span className="text-gray-700">Cost Per Lead:</span>
<span className="font-semibold">₹123</span>
</div>
<div className="flex justify-between">
<span className="text-gray-700">Bookings:</span>
<span className="font-semibold text-blue-600">23</span>
</div>
</div>
</div>
<p className="text-gray-600 text-sm italic mb-4">
"See how Resort XYZ got 23 direct bookings in their first 30 days using our system."
</p>
<div className="flex items-center space-x-2">
<div className="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center">
<Building className="w-5 h-5 text-gray-600" />
</div>
<div>
<div className="font-semibold text-gray-900">Himalayan Resort, Manali</div>
<div className="text-sm text-gray-600">Luxury Mountain Resort</div>
</div>
</div>
</div>
{/* Success Story 2 */}
<div className="bg-gray-50 rounded-lg p-6 shadow-lg">
<div className="bg-green-100 rounded-lg p-4 mb-4">
<div className="text-sm text-gray-600 mb-2">WhatsApp Conversation</div>
<div className="space-y-2">
<div className="bg-white rounded-lg p-3">
<div className="text-sm text-gray-600 mb-1">Guest:</div>
<div className="text-gray-900">"We are coming this weekend, please confirm our booking for 2 rooms."</div>
<div className="text-green-600 text-xs mt-1">✓✓ Read</div>
</div>
<div className="bg-blue-100 rounded-lg p-3">
<div className="text-sm text-gray-600 mb-1">Hotel:</div>
<div className="text-gray-900">"Confirmed! Your booking is secured. Payment link sent."</div>
</div>
</div>
</div>
<p className="text-gray-600 text-sm italic mb-4">
"WhatsApp automation converted 85% of our inquiries into confirmed bookings."
</p>
<div className="flex items-center space-x-2">
<div className="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center">
<Building className="w-5 h-5 text-gray-600" />
</div>
<div>
<div className="font-semibold text-gray-900">Seaside Hotel, Goa</div>
<div className="text-sm text-gray-600">Beachfront Property</div>
</div>
</div>
</div>
{/* Success Story 3 */}
<div className="bg-gray-50 rounded-lg p-6 shadow-lg">
<div className="bg-green-100 rounded-lg p-4 mb-4">
<div className="text-sm text-gray-600 mb-2">Booking System Dashboard</div>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-700">This Month:</span>
<span className="font-semibold text-green-600">18 New Bookings</span>
</div>
<div className="flex justify-between">
<span className="text-gray-700">Revenue:</span>
<span className="font-semibold">₹2,87,000</span>
</div>
<div className="flex justify-between">
<span className="text-gray-700">OTA Saved:</span>
<span className="font-semibold text-orange-600">₹57,400</span>
</div>
<div className="flex justify-between">
<span className="text-gray-700">Occupancy:</span>
<span className="font-semibold text-blue-600">78%</span>
</div>
</div>
</div>
<p className="text-gray-600 text-sm italic mb-4">
"From 30% to 78% occupancy in just 60 days with direct bookings."
</p>
<div className="flex items-center space-x-2">
<div className="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center">
<Building className="w-5 h-5 text-gray-600" />
</div>
<div>
<div className="font-semibold text-gray-900">Heritage Homestay, Rajasthan</div>
<div className="text-sm text-gray-600">Traditional Homestay</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Why Work With Me Section */}
<section className="py-20 px-4 bg-gray-900 text-white">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-bold mb-6">
Why Property Owners Choose to Work With Me
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
I'm not just another digital marketer. I specialize exclusively in the hospitality industry with proven systems that deliver results.
</p>
</div>
<div className="grid md:grid-cols-2 gap-12 items-center">
<div className="space-y-8">
<div>
<h3 className="text-2xl font-bold mb-4">Specialized Expertise</h3>
<p className="text-gray-300 mb-4">
5+ years exclusively helping resorts, hotels, and homestays in India. I understand your unique challenges, seasonal patterns, and what motivates Indian travelers to book.
</p>
<div className="flex items-center space-x-2 text-orange-400">
<Award className="w-5 h-5" />
<span>Featured in Hospitality Growth Leaders 2024</span>
</div>
</div>
<div>
<h3 className="text-2xl font-bold mb-4">Proven Track Record</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<div className="text-3xl font-bold text-green-400">200+</div>
<div className="text-sm text-gray-400">Properties Served</div>
</div>
<div>
<div className="text-3xl font-bold text-blue-400">₹12Cr+</div>
<div className="text-sm text-gray-400">Revenue Generated</div>
</div>
</div>
</div>
<div>
<h3 className="text-2xl font-bold mb-4">Complete System, Not Just Ads</h3>
<ul className="space-y-2 text-gray-300">
<li className="flex items-center space-x-2">
<CheckCircle className="w-5 h-5 text-green-400" />
<span>Meta Ads strategy & management</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="w-5 h-5 text-green-400" />
<span>WhatsApp automation & follow-up</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="w-5 h-5 text-green-400" />
<span>Booking funnel optimization</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="w-5 h-5 text-green-400" />
<span>Content strategy & creation</span>
</li>
</ul>
</div>
</div>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-8">
<div className="text-center">
<div className="w-32 h-32 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full mx-auto mb-6 flex items-center justify-center">
<span className="text-2xl font-bold text-white">RK</span>
</div>
<h3 className="text-2xl font-bold mb-2">Rahul Kumar</h3>
<p className="text-orange-400 mb-4">Hospitality Marketing Specialist</p>
<p className="text-gray-300 mb-6">
"I've dedicated my career to helping Indian hospitality businesses break free from OTA dependency.
My systems have generated over ₹12 crores in direct booking revenue for properties across India."
</p>
<div className="flex justify-center space-x-4">
<div className="flex items-center space-x-1">
<Star className="w-4 h-4 text-yellow-400 fill-current" />
<Star className="w-4 h-4 text-yellow-400 fill-current" />
<Star className="w-4 h-4 text-yellow-400 fill-current" />
<Star className="w-4 h-4 text-yellow-400 fill-current" />
<Star className="w-4 h-4 text-yellow-400 fill-current" />
</div>
<span className="text-sm text-gray-400">4.9/5 Client Rating</span>
</div>
</div>
</div>
</div>
</div>
</section>
{/* FAQ Section */}
<section className="py-20 px-4 bg-gray-50">
<div className="max-w-4xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
Frequently Asked Questions
</h2>
<p className="text-xl text-gray-600">
Get answers to common questions about Meta Ads for hospitality businesses.
</p>
</div>
<div className="space-y-4">
{[
{
question: "Will this work for my small property?",
answer: "Absolutely! Our system is designed to work for properties of all sizes. Small properties often see better results because they can provide more personalized service. We've helped homestays with just 3 rooms get 15+ bookings monthly."
},
{
question: "Do I need a big budget for Meta Ads?",
answer: "No. You can start with as little as ₹5,000-10,000 per month. The key is not the budget size, but how strategically you use it. We help you maximize every rupee spent to get the best return on investment."
},
{
question: "How soon can I get results?",
answer: "Most properties see their first inquiries within 48-72 hours of launching ads. First bookings typically come within 7-14 days. Full system optimization happens within 21-45 days, after which you'll see consistent results."
},
{
question: "What if I don't understand ads or technology?",
answer: "Perfect! That's exactly why you need an expert. I handle all the technical aspects - ad creation, optimization, analytics, and automation setup. You just focus on welcoming guests and providing great service."
}
].map((faq, index) => (
<div key={index} className="bg-white rounded-lg shadow-md">
<button
onClick={() => toggleFaq(index)}
className="w-full p-6 text-left flex justify-between items-center hover:bg-gray-50 transition-colors"
>
<h3 className="text-lg font-semibold text-gray-900">{faq.question}</h3>
{expandedFaq === index ? (
<ChevronUp className="w-5 h-5 text-gray-500" />
) : (
<ChevronDown className="w-5 h-5 text-gray-500" />
)}
</button>
{expandedFaq === index && (
<div className="px-6 pb-6">
<p className="text-gray-600">{faq.answer}</p>
</div>
)}
</div>
))}
</div>
</div>
</section>
{/* Scarcity Section */}
<section className="py-20 px-4 bg-red-50">
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
Limited Availability: Only 5 Free Calls This Week
</h2>
<p className="text-xl text-gray-600 mb-8">
I personally conduct each strategy call to ensure you get the best advice. Due to my commitment to quality, I can only take 5 new calls per week.
</p>
<div className="bg-white rounded-lg shadow-lg p-8 mb-8">
<h3 className="text-2xl font-bold text-gray-900 mb-4">Time Left to Book:</h3>
<div className="grid grid-cols-4 gap-4 max-w-md mx-auto">
<div className="bg-red-500 text-white rounded-lg p-4">
<div className="text-2xl font-bold">{timeLeft.days}</div>
<div className="text-sm">Days</div>
</div>
<div className="bg-red-500 text-white rounded-lg p-4">
<div className="text-2xl font-bold">{timeLeft.hours}</div>
<div className="text-sm">Hours</div>
</div>
<div className="bg-red-500 text-white rounded-lg p-4">
<div className="text-2xl font-bold">{timeLeft.minutes}</div>
<div className="text-sm">Minutes</div>
</div>
<div className="bg-red-500 text-white rounded-lg p-4">
<div className="text-2xl font-bold">{timeLeft.seconds}</div>
<div className="text-sm">Seconds</div>
</div>
</div>
</div>
<div className="flex items-center justify-center space-x-4 mb-8">
<div className="flex -space-x-2">
{[1, 2, 3, 4, 5].map((i) => (
<div key={i} className="w-10 h-10 bg-gray-300 rounded-full border-2 border-white flex items-center justify-center">
<span className="text-xs font-bold text-gray-600">{i}</span>
</div>
))}
</div>
<div className="text-gray-600">
<span className="text-red-600 font-bold">3 spots taken</span> • 2 spots remaining
</div>
</div>
<button className="bg-red-500 hover:bg-red-600 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
<Clock className="w-5 h-5 inline mr-2" />
Secure Your Spot Now
</button>
</div>
</section>
{/* Final CTA Section */}
<section className="py-20 px-4 bg-blue-900 text-white">
<div className="max-w-4xl mx-auto">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold mb-6">
Ready to Transform Your Booking System?
</h2>
<p className="text-xl text-blue-100 mb-8">
Book your free 15-minute strategy call now and discover how to get 15-20+ direct bookings every month without OTA commissions.
</p>
</div>
<div className="bg-white rounded-lg p-8 shadow-lg">
<h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
Book Your Free Strategy Call
</h3>
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid md:grid-cols-2 gap-6">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Your Name *
</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleInputChange}
required
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
placeholder="Enter your full name"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
WhatsApp Number *
</label>
<input
type="tel"
name="whatsapp"
value={formData.whatsapp}
onChange={handleInputChange}
required
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
placeholder="+91 9876543210"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Email Address *
</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleInputChange}
required
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
placeholder="your@email.com"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Property Name *
</label>
<input
type="text"
name="propertyName"
value={formData.propertyName}
onChange={handleInputChange}
required
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
placeholder="Your resort/hotel/homestay name"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Current Monthly Occupancy *
</label>
<select
name="monthlyOccupancy"
value={formData.monthlyOccupancy}
onChange={handleInputChange}
required
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
>
<option value="">Select your current occupancy</option>
<option value="0-25%">0-25%</option>
<option value="26-50%">26-50%</option>
<option value="51-75%">51-75%</option>
<option value="76-100%">76-100%</option>
</select>
</div>
<button
type="submit"
className="w-full bg-orange-500 hover:bg-orange-600 text-white py-4 px-6 rounded-lg font-semibold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg"
>
<Calendar className="w-5 h-5 inline mr-2" />
Book My Free Strategy Call Now
</button>
</form>
<div className="text-center mt-6 text-gray-600">
<p className="text-sm">
✓ Free 15-minute call • ✓ No commitment required • ✓ Personalized action plan
</p>
<p className="text-xs mt-2">
By submitting this form, you agree to receive WhatsApp messages and emails from us. You can unsubscribe at any time.
</p>
</div>
</div>
</div>
</section>
{/* Footer */}
<footer className="bg-gray-900 text-white py-12 px-4">
<div className="max-w-6xl mx-auto">
<div className="grid md:grid-cols-3 gap-8">
<div>
<h3 className="text-xl font-bold mb-4">Meta Ads Booking Systems</h3>
<p className="text-gray-400 mb-4">
Helping Indian resorts, hotels, and homestays get consistent direct bookings through proven Meta Ads strategies.
</p>
<div className="flex space-x-4">
<Mail className="w-5 h-5 text-gray-400" />
<Phone className="w-5 h-5 text-gray-400" />
<MessageCircle className="w-5 h-5 text-gray-400" />
</div>
</div>
<div>
<h4 className="text-lg font-semibold mb-4">Quick Links</h4>
<ul className="space-y-2 text-gray-400">
<li><a href="#" className="hover:text-white transition-colors">Privacy Policy</a></li>
<li><a href="#" className="hover:text-white transition-colors">Terms of Service</a></li>
<li><a href="#" className="hover:text-white transition-colors">Refund Policy</a></li>
<li><a href="#" className="hover:text-white transition-colors">Contact Us</a></li>
</ul>
</div>
<div>
<h4 className="text-lg font-semibold mb-4">Disclaimer</h4>
<p className="text-gray-400 text-sm">
Results may vary based on property type, location, market conditions, and implementation.
Individual results are not guaranteed. Past performance does not guarantee future results.
</p>
</div>
</div>
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2024 Meta Ads Booking Systems. All rights reserved.</p>
</div>
</div>
</footer>
</div>);
}
export default App;