const SignatureWebsite = () => {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [expandedFAQ, setExpandedFAQ] = useState(null);
const toggleFAQ = (index) => {
setExpandedFAQ(expandedFAQ === index ? null : index);
};
const navLinks = [
{ href: ‘#products’, label: ‘Products’ },
{ href: ‘#about’, label: ‘About’ },
{ href: ‘#faq’, label: ‘FAQ’ },
{ href: ‘#contact’, label: ‘Contact’ },
];
const products = [
{
name: ‘Classic Comfort’,
price: ‘₹599’,
description: ‘Our signature line. Premium 100% cotton blend with perfect elasticity. The everyday essential for confident men.’,
},
{
name: ‘Night Elite’,
price: ‘₹799’,
description: ‘Premium bamboo-cotton blend. Enhanced breathability for hot climates. Sleep in ultimate comfort all season long.’,
},
{
name: ‘Pro Series’,
price: ‘₹999’,
description: ‘Ultra-premium seamless construction. Moisture-wicking technology and superior durability. Our finest offering.’,
},
];
const features = [
{ icon: ‘🌾’, title: ‘100% Natural’, description: ‘Premium cotton and natural materials. Nothing synthetic, nothing harsh on your skin.’ },
{ icon: ‘💨’, title: ‘Breathable’, description: ‘Climate-conscious design handles humidity and heat. Perfect for Indian summers and year-round comfort.’ },
{ icon: ‘🛡️’, title: ‘Durable’, description: ‘Engineered to last 500+ washes without losing softness or shape. True value for money.’ },
{ icon: ‘✨’, title: ‘Seamless’, description: ‘Invisible comfort design means zero irritation, zero shifting, pure comfort all night long.’ },
];
const testimonials = [
{
stars: 5,
text: “Best boxers I’ve owned. Comfortable from day one, and after 6 months of regular washing they still feel brand new. This is the quality I expect from Indian-made products.”,
author: ‘Rajesh M.’,
role: ‘Delhi · 50+ purchases’,
},
{
stars: 5,
text: “Finally found something that actually works in this heat. No more irritation, no shifting. I’m buying these for all my friends. Highly recommend to every man.”,
author: ‘Arjun K.’,
role: ‘Mumbai · Regular Customer’,
},
];
const faqs = [
{
question: “What’s the best way to care for my boxers?”,
answer: ‘Wash in cool water with mild detergent. Avoid bleach and fabric softener to maintain quality. Air dry when possible, or machine dry on low heat. They\’ll last 500+ washes with proper care and maintain softness.’,
},
{
question: ‘Do you offer a size guarantee or returns?’,
answer: ‘Yes. We offer a 30-day money-back guarantee with no questions asked. If the fit isn\’t perfect or you\’re not satisfied, we\’ll refund you immediately. Free size exchanges available within 7 days of purchase.’,
},
{
question: ‘How long does shipping take?’,
answer: ‘We ship within 2-3 business days from Mumbai. Metro cities receive orders in 3-5 days. Tier-2 cities in 7-10 days. Free shipping on orders above ₹1000. Track your order in real-time through our dashboard.’,
},
];
const footerSections = [
{
title: ‘Shop’,
links: [‘Classic Comfort’, ‘Night Elite’, ‘Pro Series’, ‘Size Guide’],
},
{
title: ‘About’,
links: [‘Our Story’, ‘Quality Standards’, ‘Sustainability’, ‘Blog’],
},
{
title: ‘Support’,
links: [‘Contact Us’, ‘FAQ’, ‘Returns’, ‘Track Order’],
},
{
title: ‘Follow’,
links: [‘Instagram’, ‘Facebook’, ‘Twitter’, ‘YouTube’],
},
];
return (
{/* Header */}
S
Signature
{/* Desktop Nav */}
<nav className="hidden md:flex gap-8 items-center">
{navLinks.map((link) => (
<a
key={link.href}
href={link.href}
className="text-sm text-gray-600 hover:text-[#E63946] transition font-medium"
>
{link.label}
</a>
))}
<button className="px-7 py-3 bg-[#E63946] text-white text-xs font-bold rounded hover:bg-[#001E4D] transition transform hover:-translate-y-1 shadow-lg hover:shadow-xl">
Shop Now
</button>
</nav>
{/* Mobile Menu Button */}
<button
className="md:hidden p-2 hover:bg-gray-100 rounded"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
>
{mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
{/* Mobile Menu */}
{mobileMenuOpen && (
<div className="md:hidden border-t border-gray-100 p-4 space-y-3">
{navLinks.map((link) => (
<a
key={link.href}
href={link.href}
className="block text-sm text-gray-600 hover:text-[#E63946] py-2 font-medium"
onClick={() => setMobileMenuOpen(false)}
>
{link.label}
</a>
))}
<button className="w-full px-4 py-3 bg-[#E63946] text-white text-xs font-bold rounded hover:bg-[#001E4D] transition">
Shop Now
</button>
</div>
)}
</header>
{/* Hero Section */}
<section className="bg-gradient-to-br from-[#001E4D] to-[#0a2d5c] text-white px-6 py-32 md:py-40 relative overflow-hidden">
<div className="absolute inset-0 opacity-20">
<div className="absolute top-0 right-0 w-96 h-96 bg-[#E63946] rounded-full blur-3xl"></div>
<div className="absolute bottom-0 left-0 w-96 h-96 bg-[#E63946] rounded-full blur-3xl opacity-10"></div>
</div>
<div className="max-w-3xl mx-auto text-center relative z-10">
<h1 className="text-5xl md:text-6xl font-bold mb-4 leading-tight">Sleep Better Tonight</h1>
<div className="text-2xl md:text-3xl text-red-300 font-medium mb-6">Premium Comfort Boxers for Indian Men</div>
<p className="text-lg text-gray-200 mb-10 leading-relaxed">
100% Cotton. Engineered for breathability. Trusted by 50,000+ men across India. Experience comfort that lasts night after night.
</p>
<div className="flex flex-col md:flex-row gap-4 justify-center">
<button className="px-12 py-4 bg-[#E63946] text-white font-bold uppercase text-sm rounded hover:bg-white hover:text-[#E63946] transition transform hover:-translate-y-1">
Explore Collection
</button>
<button className="px-12 py-4 border-2 border-white text-white font-bold uppercase text-sm rounded hover:bg-white hover:text-[#001E4D] transition transform hover:-translate-y-1">
Learn More
</button>
</div>
</div>
</section>
{/* Products Section */}
<section id="products" className="max-w-7xl mx-auto px-6 py-24">
<div className="text-center mb-16">
<div className="text-sm font-bold uppercase letter-spacing text-[#E63946] mb-2">Our Collection</div>
<h2 className="text-4xl md:text-5xl font-bold text-[#001E4D] mb-4">Premium Comfort Boxers</h2>
<p className="text-gray-600 text-lg max-w-2xl mx-auto">
Engineered for breathability, durability, and all-day comfort
</p>
</div>
{/* Product Grid */}
<div className="grid md:grid-cols-3 gap-8 mb-16">
{products.map((product, idx) => (
<div
key={idx}
className="group hover:shadow-2xl hover:-translate-y-2 transition duration-300"
>
<div className="h-80 bg-gradient-to-b from-gray-100 to-gray-200 rounded-lg mb-6 flex items-center justify-center text-gray-400 border-2 border-gray-300">
Product image
</div>
<h3 className="text-xl font-bold text-[#001E4D] mb-2">{product.name}</h3>
<div className="text-2xl font-black text-[#E63946] mb-3">{product.price}</div>
<p className="text-gray-600 text-sm leading-relaxed">{product.description}</p>
</div>
))}
</div>
{/* Features Grid */}
<div className="grid md:grid-cols-4 gap-6">
{features.map((feature, idx) => (
<div
key={idx}
className="bg-gray-50 p-8 rounded-lg border-2 border-gray-200 text-center hover:border-[#E63946] hover:shadow-lg transition"
>
<div className="text-4xl mb-4">{feature.icon}</div>
<h4 className="font-bold text-[#001E4D] mb-2 text-lg">{feature.title}</h4>
<p className="text-sm text-gray-600 leading-relaxed">{feature.description}</p>
</div>
))}
</div>
</section>
{/* Testimonials Section */}
<section
id="about"
className="bg-gradient-to-br from-[#001E4D] to-[#0a2d5c] text-white px-6 py-24 my-20"
>
<div className="max-w-7xl mx-auto">
<div className="text-center mb-16">
<div className="text-sm font-bold uppercase text-red-300 mb-2">What Our Customers Say</div>
<h2 className="text-4xl md:text-5xl font-bold mb-4">Loved by Real Men</h2>
</div>
<div className="grid md:grid-cols-2 gap-8">
{testimonials.map((testimonial, idx) => (
<div
key={idx}
className="bg-white bg-opacity-10 border-2 border-[#E63946] border-opacity-40 p-8 rounded-lg hover:bg-opacity-20 hover:border-[#E63946] transition"
>
<div className="text-red-300 font-bold text-sm mb-4">
{'★'.repeat(testimonial.stars)} Verified Purchase
</div>
<p className="text-gray-100 leading-relaxed mb-6 text-base">"{testimonial.text}"</p>
<div className="font-bold text-lg text-white">{testimonial.author}</div>
<div className="text-sm text-gray-300">{testimonial.role}</div>
</div>
))}
</div>
</div>
</section>
{/* FAQ Section */}
<section id="faq" className="max-w-7xl mx-auto px-6 py-24">
<div className="text-center mb-16">
<div className="text-sm font-bold uppercase text-[#E63946] mb-2">Questions</div>
<h2 className="text-4xl md:text-5xl font-bold text-[#001E4D] mb-4">Frequently Asked</h2>
</div>
<div className="max-w-2xl mx-auto space-y-6">
{faqs.map((faq, idx) => (
<div key={idx} className="border-b-2 border-gray-200 pb-6">
<button
onClick={() => toggleFAQ(idx)}
className="w-full flex justify-between items-center text-left hover:text-[#E63946] transition"
>
<span className="text-lg font-bold text-[#001E4D]">{faq.question}</span>
<span
className={`text-[#E63946] text-2xl transition transform ${
expandedFAQ === idx ? 'rotate-45' : ''
}`}
>
+
</span>
</button>
{expandedFAQ === idx && (
<p className="text-gray-600 mt-4 leading-relaxed text-base animate-in fade-in duration-200">
{faq.answer}
</p>
)}
</div>
))}
</div>
</section>
{/* Newsletter Section */}
<section className="bg-gradient-to-br from-[#E63946] to-[#d62828] text-white px-6 py-24 my-20">
<div className="max-w-3xl mx-auto text-center">
<h2 className="text-4xl md:text-5xl font-bold mb-4">Stay Updated</h2>
<p className="text-base text-red-100 mb-10">
Get exclusive deals, new launches, and comfort tips delivered to your inbox
</p>
<div className="flex flex-col md:flex-row gap-3 max-w-md mx-auto">
<input
type="email"
placeholder="Enter your email"
className="flex-1 px-6 py-3 rounded text-[#001E4D] text-sm font-medium placeholder-gray-400"
/>
<button className="px-8 py-3 bg-[#001E4D] text-white font-bold uppercase text-xs rounded hover:bg-white hover:text-[#E63946] transition transform hover:-translate-y-1">
Subscribe
</button>
</div>
</div>
</section>
{/* Footer */}
<footer className="bg-[#001E4D] text-gray-400 px-6 py-16 border-t-4 border-[#E63946]">
<div className="max-w-7xl mx-auto">
<div className="grid md:grid-cols-4 gap-8 mb-12">
{footerSections.map((section, idx) => (
<div key={idx}>
<h4 className="text-white font-bold text-sm mb-4 uppercase">{section.title}</h4>
<ul className="space-y-2">
{section.links.map((link, linkIdx) => (
<li key={linkIdx}>
<a
href="#"
className="text-sm hover:text-[#E63946] transition text-gray-400"
>
{link}
</a>
</li>
))}
</ul>
</div>
))}
</div>
<div className="border-t border-gray-700 pt-8 text-center text-sm">
<p>© 2024 Signature India. All rights reserved. Premium comfort. Indian craftsmanship.</p>
</div>
</div>
</footer>
</div>);
};
export default SignatureWebsite;