Untitled
unknown
plain_text
13 days ago
3.3 kB
1
Indexable
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' },
Editor is loading...
Leave a Comment