Ahilya

[valuevibe30-glitch]

import React from 'react';

export default function AhilyaVastralayaLuxuryHomepage() {
const categories = [
{
title: 'Royal Banarasi',
image: 'https://images.unsplash.com/photo-1610030469983-98e550d6193c?q=80&w=1200&auto=format&fit=crop',
},
{
title: 'Luxury Paithani',
image: 'https://images.unsplash.com/photo-1583391733956-6c77a59f0d6b?q=80&w=1200&auto=format&fit=crop',
},
{
title: 'Wedding Couture',
image: 'https://images.unsplash.com/photo-1529139574466-a303027c1d8b?q=80&w=1200&auto=format&fit=crop',
},
{
title: 'Festival Collection',
image: 'https://images.unsplash.com/photo-1610189020382-668f692b5c67?q=80&w=1200&auto=format&fit=crop',
},
];

const products = [
{
title: 'Handcrafted Banarasi Silk Saree',
price: '₹3,499',
oldPrice: '₹7,999',
badge: 'Only 2 Left',
image: 'https://images.unsplash.com/photo-1610030469983-98e550d6193c?q=80&w=1200&auto=format&fit=crop',
},
{
title: 'Royal Wedding Paithani',
price: '₹5,999',
oldPrice: '₹11,999',
badge: 'Trending Now',
image: 'https://images.unsplash.com/photo-1583391733956-6c77a59f0d6b?q=80&w=1200&auto=format&fit=crop',
},
{
title: 'Premium Designer Saree',
price: '₹2,299',
oldPrice: '₹4,999',
badge: '20 People Viewing',
image: 'https://images.unsplash.com/photo-1529139574466-a303027c1d8b?q=80&w=1200&auto=format&fit=crop',
},
];

return (

{/* Announcement Bar */}

Luxury Indian Fashion • Free Shipping Above ₹699 • Trusted Across India

  {/* Navbar */}
  <header className="sticky top-0 z-50 backdrop-blur-2xl bg-white/80 border-b border-yellow-200/40 shadow-sm">
    <div className="max-w-7xl mx-auto px-5 py-5 flex items-center justify-between gap-5">
      <div>
        <h1 className="text-3xl font-black tracking-[3px] text-[#9b6b19] uppercase leading-none">
          Ahilya
        </h1>
        <p className="text-xs tracking-[4px] uppercase text-gray-500 mt-1">
          Vastralaya
        </p>
      </div>

      <div className="hidden lg:flex flex-1 max-w-3xl relative">
        <input
          type="text"
          placeholder="Search luxury sarees, wedding collections, festival wear..."
          className="w-full bg-white border border-yellow-300/40 rounded-full px-7 py-4 shadow-lg focus:outline-none focus:ring-2 focus:ring-yellow-600"
        />
        <button className="absolute right-2 top-2 bg-black text-white rounded-full px-6 py-2 hover:bg-[#9b6b19] transition-all font-semibold">
          Search
        </button>
      </div>

      <div className="flex items-center gap-5 font-medium text-sm">
        <button className="hover:text-[#9b6b19] transition-all hidden md:block">
          Wishlist
        </button>
        <button className="hover:text-[#9b6b19] transition-all hidden md:block">
          Account
        </button>
        <button className="relative bg-black text-white rounded-full px-5 py-3 hover:bg-[#9b6b19] transition-all shadow-xl">
          Cart
          <span className="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-red-500 text-xs flex items-center justify-center font-bold">
            2
          </span>
        </button>
      </div>
    </div>
  </header>

  {/* Hero Section */}
  <section className="relative h-[90vh] overflow-hidden">
    <img
      src="https://images.unsplash.com/photo-1610189020382-668f692b5c67?q=80&w=1800&auto=format&fit=crop"
      alt="Luxury Indian Fashion"
      className="absolute inset-0 w-full h-full object-cover scale-105"
    />
    <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-black/20" />

    <div className="relative z-10 h-full flex items-center max-w-7xl mx-auto px-5">
      <div className="max-w-3xl text-white">
        <p className="uppercase tracking-[7px] text-yellow-300 mb-6 text-sm">
          Premium Indian Ethnic Couture
        </p>
        <h2 className="text-6xl md:text-8xl font-black leading-[0.95] mb-8">
          Wear
          <br />
          Royalty.
        </h2>
        <p className="text-lg md:text-xl text-gray-200 leading-relaxed mb-10 max-w-2xl">
          Discover handcrafted sarees, luxury ethnic wear and AI-powered
          fashion experiences trusted by modern Indian women.
        </p>
        <div className="flex flex-wrap gap-5">
          <button className="bg-gradient-to-r from-yellow-600 to-yellow-500 text-black px-10 py-5 rounded-full font-bold text-lg shadow-2xl hover:scale-105 transition-all duration-300">
            Shop Collection
          </button>
          <button className="border border-white/40 backdrop-blur-xl bg-white/10 px-10 py-5 rounded-full font-semibold text-lg hover:bg-white/20 transition-all duration-300">
            Try AI Saree Studio
          </button>
        </div>
      </div>
    </div>
  </section>

  {/* Luxury Category Cards */}
  <section className="max-w-7xl mx-auto px-5 py-24">
    <div className="flex items-end justify-between mb-14">
      <div>
        <p className="uppercase tracking-[5px] text-[#9b6b19] mb-3 text-sm font-semibold">
          Explore Collections
        </p>
        <h3 className="text-4xl md:text-5xl font-black leading-tight">
          Curated Luxury
          <br />
          Fashion Categories
        </h3>
      </div>
      <button className="hidden md:block text-lg font-semibold text-[#9b6b19] hover:underline">
        View All
      </button>
    </div>

    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
      {categories.map((category, index) => (
        <div
          key={index}
          className="group relative overflow-hidden rounded-[32px] h-[450px] shadow-2xl cursor-pointer"
        >
          <img
            src={category.image}
            alt={category.title}
            className="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-all duration-700"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
          <div className="absolute bottom-0 p-8 text-white w-full">
            <p className="uppercase tracking-[4px] text-yellow-300 text-xs mb-3">
              Premium Collection
            </p>
            <h4 className="text-3xl font-bold mb-5 leading-tight">
              {category.title}
            </h4>
            <button className="bg-white text-black px-6 py-3 rounded-full font-semibold hover:bg-yellow-500 transition-all">
              Explore
            </button>
          </div>
        </div>
      ))}
    </div>
  </section>

  {/* Best Sellers */}
  <section className="max-w-7xl mx-auto px-5 py-24 bg-white rounded-[40px] shadow-sm my-10">
    <div className="flex items-end justify-between mb-14">
      <div>
        <p className="uppercase tracking-[5px] text-[#9b6b19] mb-3 text-sm font-semibold">
          Best Sellers
        </p>
        <h3 className="text-4xl md:text-5xl font-black leading-tight">
          Most Loved
          <br />
          Across India
        </h3>
      </div>
    </div>

    <div className="grid lg:grid-cols-3 gap-10">
      {products.map((product, index) => (
        <div
          key={index}
          className="bg-gray-50 rounded-[35px] overflow-hidden border border-yellow-100 shadow-xl hover:shadow-[0_20px_60px_rgba(0,0,0,0.12)] transition-all duration-500 group"
        >
          <div className="relative overflow-hidden">
            <img
              src={product.image}
              alt={product.title}
              className="h-[450px] w-full object-cover group-hover:scale-105 transition-all duration-700"
            />
            <div className="absolute top-5 left-5 bg-red-500 text-white px-5 py-2 rounded-full text-xs font-bold shadow-lg uppercase tracking-wide">
              {product.badge}
            </div>
          </div>

          <div className="p-8">
            <h4 className="text-2xl font-bold mb-3 leading-snug">
              {product.title}
            </h4>
            <div className="flex items-center gap-4 mb-7">
              <span className="text-3xl font-black text-black">
                {product.price}
              </span>
              <span className="text-gray-400 line-through text-lg">
                {product.oldPrice}
              </span>
            </div>
            <div className="flex gap-4">
              <button className="flex-1 bg-black text-white py-4 rounded-2xl font-bold hover:bg-[#9b6b19] transition-all duration-300 shadow-xl">
                Add To Cart
              </button>
              <button className="px-6 border rounded-2xl font-semibold hover:bg-black hover:text-white transition-all duration-300">
                AI Try-On
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  </section>

  {/* Floating Buttons */}
  <div className="fixed bottom-6 right-6 z-50 flex flex-col gap-4">
    <button className="bg-gradient-to-r from-green-500 to-green-600 text-white px-7 py-4 rounded-full shadow-[0_10px_40px_rgba(0,0,0,0.25)] font-bold hover:scale-105 transition-all duration-300">
      WhatsApp Support
    </button>
    <button className="bg-black border border-yellow-500 text-white px-7 py-4 rounded-full shadow-[0_10px_40px_rgba(0,0,0,0.25)] font-bold hover:bg-yellow-500 hover:text-black transition-all duration-300">
      AI Assistant
    </button>
  </div>
</div>

);
}