Untitled

import React from "react";
import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <div className="bg-black text-white min-h-screen font-sans">
      <header className="p-6 border-b border-gray-800 flex justify-between items-center">
        <h1 className="text-3xl font-bold tracking-wide">RAB</h1>
        <nav className="space-x-6 text-lg">
          <a href="#shop" className="hover:text-gold">Shop</a>
          <a href="#trending" className="hover:text-gold">Trending</a>
          <a href="#about" className="hover:text-gold">About</a>
          <a href="#contact" className="hover:text-gold">Contact</a>
        </nav>
      </header>

      <section className="text-center py-24 px-4 bg-gradient-to-b from-black to-gray-900">
        <h2 className="text-5xl font-semibold mb-6">Discover the Hottest Trends</h2>
        <p className="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
          Luxury, style, and the latest drops—all in one place. Step up your game with RAB.
        </p>
        <Button className="text-black bg-gold hover:bg-yellow-400 text-lg px-8 py-4 rounded-full">
          Shop Now
        </Button>
      </section>

      <section id="shop" className="p-12">
        <h3 className="text-4xl font-semibold mb-6 text-center">Featured Products</h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
          {/* Sample product cards */}
          <div className="bg-gray-900 p-6 rounded-2xl shadow-lg">
            <img src="/product1.jpg" alt="Product 1" className="rounded-xl mb-4" />
            <h4 className="text-2xl font-medium">Luxury Watch</h4>
            <p className="text-gold text-xl mt-2">$299</p>
            <Button className="mt-4 bg-gold text-black w-full">Add to Cart</Button>
          </div>
          {/* Repeat as needed */}
        </div>
      </section>

      <section id="about" className="p-12 bg-gray-950 text-gray-300">
        <h3 className="text-4xl font-semibold mb-4 text-center">About RAB</h3>
        <p className="max-w-3xl mx-auto text-center text-lg">
          At RAB, we curate the most sought-after products in fashion, tech, and lifestyle. Our mission is simple: bring luxury and trendiness together, so you can stand out without compromise.
        </p>
      </section>

      <section id="contact" className="p-12">
        <h3 className="text-4xl font-semibold mb-4 text-center">Contact Us</h3>
        <form className="max-w-xl mx-auto space-y-4">
          <input type="text" placeholder="Name" className="w-full p-4 rounded bg-gray-800 text-white" />
          <input type="email" placeholder="Email" className="w-full p-4 rounded bg-gray-800 text-white" />
          <textarea placeholder="Message" rows="5" className="w-full p-4 rounded bg-gray-800 text-white"></textarea>
          <Button className="bg-gold text-black w-full">Send Message</Button>
        </form>
      </section>

      <footer className="text-center py-6 text-gray-600 border-t border-gray-800">
        © 2025 RAB. All rights reserved.
      </footer>
    </div>
  );
}

// Tailwind customization needed:
// Add to tailwind.config.js:
// colors: { gold: '#D4AF37' },