index.js ya App.js

[royalsinganaturetrim-stack]

import React from "react";

export default function SalonWebsite() {
return (

{/* Header */}

Royal Signature Trim - Men’s Salon

Services
Prices
About
Contact

  {/* Hero Section */}
  <section className="bg-gray-100 text-center p-10">
    <h2 className="text-3xl font-bold mb-3">Style Starts Here</h2>
    <p className="mb-5">Premium grooming experience for modern men</p>
    <a href="https://wa.me/918291794243" target="_blank">
      <button className="bg-green-600 text-white px-6 py-2 rounded-xl shadow">Book on WhatsApp</button>
    </a>
  </section>

  {/* Services */}
  <section id="services" className="p-10">
    <h2 className="text-2xl font-bold mb-5 text-center">Our Services</h2>
    <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
      {[
        { name: "Hair Cut", desc: "Stylish haircut with modern trends." },
        { name: "Beard Shaving", desc: "Clean and smooth shave." },
        { name: "Facial & Hair Spa", desc: "Glow skin & healthy hair." },
        { name: "Hair Color", desc: "Trendy and long-lasting color." },
        { name: "Clean Up / De-Tan", desc: "Removes tan and refreshes skin." },
        { name: "Beard Styling", desc: "Sharp and perfect beard shape." }
      ].map((item, i) => (
        <div key={i} className="border p-5 rounded-2xl shadow hover:shadow-lg transition">
          <div className="h-32 bg-gray-200 rounded mb-3 flex items-center justify-center text-gray-500">
            Image
          </div>
          <h3 className="font-bold">{item.name}</h3>
          <p>{item.desc}</p>
        </div>
      ))}
    </div>
  </section>

  {/* Prices */}
  <section id="prices" className="bg-gray-100 p-10 text-center">
    <h2 className="text-2xl font-bold mb-5">Price List</h2>
    <div className="max-w-md mx-auto space-y-3">
      <div className="flex justify-between"><span>Beard Shaving</span><span>₹99</span></div>
      <div className="flex justify-between"><span>Men Hair Cut (Starting)</span><span>₹149</span></div>
      <div className="flex justify-between"><span>Men Hair Color (Starting)</span><span>₹299</span></div>
      <div className="flex justify-between"><span>Men Hair Spa (Starting)</span><span>₹499</span></div>
      <div className="flex justify-between"><span>Men Clean Up / De-Tan (Starting)</span><span>₹499</span></div>
      <div className="flex justify-between"><span>Men Facial (Starting)</span><span>₹599</span></div>
    </div>
      <div className="flex justify-between"><span>Beard Shaving</span><span>₹80</span></div>
      <div className="flex justify-between"><span>Facial</span><span>₹300</span></div>
      <div className="flex justify-between"><span>Hair Spa</span><span>₹400</span></div>
      <div className="flex justify-between"><span>Hair Color</span><span>₹500</span></div>
    </div>
  </section>

  {/* About */}
  <section id="about" className="p-10 text-center">
    <h2 className="text-2xl font-bold mb-3">About Us</h2>
    <p>Royal Signature Trim - Men’s Salon provides premium grooming services with expert professionals and modern styles.</p>
  </section>

  {/* Contact */}
  <section id="contact" className="bg-gray-100 p-10 text-center">
    <h2 className="text-2xl font-bold mb-3">Contact Us</h2>
    <p>📍 Royal Signature Trim - Men’s Salon</p>
    <p>📞 +91 8291794243</p>
    <p className="mt-2">🕒 Open: 10:00 AM – 10:00 PM (Tue–Sun)
    <p className="text-red-600 font-semibold">Closed on Monday</p></p>

    {/* Buttons */}
    <div className="flex justify-center gap-3 mt-4 flex-wrap">
      <a href="https://maps.app.goo.gl/HstDiGP8BEwkkBgKA" target="_blank">
        <button className="bg-blue-600 text-white px-5 py-2 rounded-xl shadow">Get Directions</button>
      </a>
      <a href="https://wa.me/918291794243" target="_blank">
        <button className="bg-green-600 text-white px-5 py-2 rounded-xl shadow">Chat on WhatsApp</button>
      </a>
    </div>

    {/* Google Map */}
    <div className="mt-5 flex justify-center">
      <iframe
        title="Salon Location"
        src="https://www.google.com/maps?q=https://maps.app.goo.gl/HstDiGP8BEwkkBgKA&output=embed"
        width="100%"
        height="300"
        className="rounded-2xl shadow"
        loading="lazy"
      ></iframe>
    </div>
  </section>

  {/* Footer */}
  <footer className="bg-black text-white text-center p-3">
    <p>© 2026 Royal Signature Trim - Men’s Salon</p>
  </footer>
</div>

);
}