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!

Architecture

No Services Diagrams Yet

Architecture diagrams will be automatically generated when the Project Manager creates tasks for your project.

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