raven-perfume

byMehran Uddin

Create a modern, elegant, and luxury perfume brand website using Next.js (App Router) and Tailwind CSS. Brand Name: "Noir Essence" (you can change it if needed) Design Style: - Minimal, premium, luxury aesthetic - Soft neutral colors (black, gold, white, beige) - Smooth animations and hover effects - Fully responsive (mobile + desktop) Pages Required: 1. Home Page: - Hero section with luxury perfume banner and tagline (e.g., "Discover Your Signature Scent") - CTA button ("Shop Now") - Featured perfumes section (4–6 items) - Categories preview (Men, Women, Unisex) - Testimonials section - Newsletter subscription - Footer with links and social icons 2. About Us Page: - Brand story (luxury, craftsmanship, elegance) - Mission & vision - Why choose us section - Image + text layout 3. Shop / Products Page: - Display 10 perfumes - Each product should include: - Name - Image - Price - Short description - “View Details” button - Grid layout with filtering by category 4. Categories: - Men’s Perfumes - Women’s Perfumes - Unisex Perfumes Each category page should: - Show relevant products - Clean grid layout 5. Product Detail Page: - Large product image - Name, price, description - Notes (top, middle, base notes) - Add to Cart button (UI only) - Related products section 6. Contact Page: - Contact form (Name, Email, Message) - Business email and phone - Google Maps placeholder - Clean layout 7. Navbar: - Logo on left - Links: Home, Shop, About, Contact - Cart icon (UI only) 8. Footer: - Quick links - Social media icons - Copyright text Tech Requirements: - Next.js (latest version, App Router) - Tailwind CSS for styling - Use reusable components - Clean folder structure - Dummy data for products (10 perfumes with realistic names like "Midnight Oud", "Velvet Rose", etc.) - Use placeholder images (or Unsplash) Extra Features: - Smooth scrolling - Hover animations - Basic SEO meta tags - Fast loading and optimized layout Output: - Full working Next.js code - Components separated properly - Ready to run with `npm install` and `npm run dev`

Home
Home

Comments (0)

No comments yet. Be the first!

Home design preview
Admin Login: Sign In
Dashboard: View Overview
Products: Manage Items
Products: Edit Details
Testimonials: Update Content
Submissions: Review Forms