diff --git a/REDESIGN_SPECIFICATION.md b/REDESIGN_SPECIFICATION.md new file mode 100644 index 0000000..ec3ce8d --- /dev/null +++ b/REDESIGN_SPECIFICATION.md @@ -0,0 +1,444 @@ +# ManoonOils Redesign Specification +## Inspired by moumoujus.com Premium Skincare Aesthetic + +--- + +## Design Analysis Summary + +### Key Visual Elements from moumoujus.com: + +1. **Hero Section**: Full-screen video background with autoplay, muted, loop +2. **Navigation**: Minimalist sticky header with logo left, nav center, icons right +3. **Typography**: Clean sans-serif, generous letter-spacing, all-caps for headings +4. **Color Palette**: + - White/Off-white backgrounds + - Soft blue-gray accents (#e8f0f5 range) + - Black for CTAs and text + - Gold/bronze highlights for luxury feel +5. **Product Pages**: Two-column layout, vertical thumbnails, expandable sections +6. **Cart**: Slide-out drawer from right + +--- + +## Phase 1: Global Design System & Theme + +### Color Palette Refinement +``` +Primary: +- Background: #ffffff (pure white) +- Background-alt: #f8f9fa (soft gray-white) +- Text: #1a1a1a (near black) +- Text-muted: #666666 (gray) + +Accent: +- Accent-blue: #e8f0f5 (soft blue-gray) +- Accent-blue-dark: #a8c5d8 +- CTA-black: #000000 +- Gold: #c9a962 (for awards/accents) + +UI: +- Border: #e5e5e5 +- Border-dark: #d1d1d1 +``` + +### Typography System +``` +Display Font: Inter or DM Sans (clean, modern) +- H1: 48px/56px, font-weight: 500, letter-spacing: -0.02em +- H2: 36px/44px, font-weight: 500 +- H3: 24px/32px, font-weight: 500 +- Body: 16px/24px +- Small: 14px/20px +- Caption: 12px/16px, uppercase, letter-spacing: 0.1em +``` + +### Spacing System +``` +- xs: 4px +- sm: 8px +- md: 16px +- lg: 24px +- xl: 32px +- 2xl: 48px +- 3xl: 64px +- 4xl: 96px +- 5xl: 128px +``` + +### TODOs: +- [ ] Update CSS variables in globals.css +- [ ] Define new color tokens +- [ ] Update font system (keep DM Sans, add Inter for UI) +- [ ] Create design token file +- [ ] Update Tailwind theme config + +--- + +## Phase 2: Navigation & Header Redesign + +### Header Layout (inspired by moumoujus.com) +``` +[Logo] [Shop] [About] [Library] [Contact] [Account] [Cart (0)] +``` + +### Specifications: +- **Height**: 72px desktop, 64px mobile +- **Background**: White with subtle bottom border (#e5e5e5) +- **Position**: Sticky top-0 (not 10px offset like current) +- **Logo**: Centered on mobile, left on desktop +- **Nav Links**: Centered, uppercase, letter-spacing: 0.05em, font-size: 13px +- **Icons**: User outline, Shopping bag outline +- **Cart Badge**: Small dot or number in circle + +### Mobile Menu: +- Full-screen overlay +- Large typography for nav links +- Close button top right +- Social links at bottom + +### TODOs: +- [ ] Redesign Header.tsx with new layout +- [ ] Update MobileMenu.tsx with full-screen overlay +- [ ] Implement sticky header behavior +- [ ] Add scroll-based background change (transparent → white) +- [ ] Update cart icon with new design +- [ ] Add hover states for nav links (underline animation) + +--- + +## Phase 3: Homepage Hero with Video Background + +### Hero Section Specifications: +``` +┌─────────────────────────────────────────────────────┐ +│ [Video Background - Full Screen] │ +│ │ +│ │ +│ [Product Shot or Lifestyle Video] │ +│ │ +│ │ +│ [Brand Tagline] │ +│ PREMIUM ORGANIC OILS │ +│ │ +│ [Shop Now Button - Black] │ +└─────────────────────────────────────────────────────┘ +``` + +### Technical Requirements: +- Video: MP4/WebM format, 1920x1080, <5MB +- Autoplay, muted, loop, playsinline +- Poster image for loading state +- Gradient overlay for text readability +- Text centered, white color +- Scroll indicator at bottom + +### TODOs: +- [ ] Create new HeroVideo component +- [ ] Add video asset (placeholder for now) +- [ ] Implement video background with overlay +- [ ] Add centered text content with animation +- [ ] Create scroll-down indicator +- [ ] Add poster image fallback +- [ ] Ensure mobile fallback (image instead of video) + +--- + +## Phase 4: Product Detail Page Redesign + +### Layout Structure (Two-Column): +``` +┌─────────────────────────────────────────────────────┐ +│ [Header - Sticky] │ +├─────────────────────────────────────────────────────┤ +│ Home / [Product Name] │ +├──────────────────────┬──────────────────────────────┤ +│ │ │ +│ [Thumbnail 1] │ [Award Badge - optional] │ +│ [Thumbnail 2] │ │ +│ [Thumbnail 3] │ PRODUCT NAME │ +│ │ Short description │ +│ [Main Image] │ │ +│ [Large, centered] │ £XX.00 ★★★★★ (12) │ +│ │ │ +│ │ ────────────────────── │ +│ │ SIZE │ +│ │ [50ml] [100ml] [250ml] │ +│ │ ────────────────────── │ +│ │ │ +│ │ [ADD TO CART - FREE │ +│ │ SHIPPING - Black Button] │ +│ │ │ +│ │ ────────────────────── │ +│ │ BENEFITS │ +│ │ [Tag 1] [Tag 2] [Tag 3] │ +│ │ ────────────────────── │ +│ │ DESCRIPTION [+] │ +│ │ ────────────────────── │ +│ │ HOW TO USE [+] │ +│ │ ────────────────────── │ +│ │ INGREDIENTS [+] │ +│ │ │ +└──────────────────────┴──────────────────────────────┘ +``` + +### Component Specifications: + +#### Image Gallery: +- Vertical thumbnail list on left (desktop) +- Horizontal thumbnails below (mobile) +- Click to change main image +- Zoom on hover (optional) +- Smooth transitions + +#### Product Info: +- Breadcrumb: Home / [Product Name] +- Product name: 24-32px, font-weight: 500 +- Short description below name +- Price + reviews on same line +- Size selector: Pill buttons +- CTA: Full-width black button + +#### Expandable Sections: +- Accordion style +- Plus/minus icons +- Smooth expand/collapse animation +- Content: Description, How to Use, Ingredients + +### TODOs: +- [ ] Redesign ProductDetail.tsx with new two-column layout +- [ ] Create ProductImageGallery component with vertical thumbnails +- [ ] Add breadcrumb navigation +- [ ] Create size selector component (pill buttons) +- [ ] Implement expandable accordion sections +- [ ] Add benefits/tags display +- [ ] Style "Add to Cart" button (black, full-width) +- [ ] Add star rating component +- [ ] Make layout responsive + +--- + +## Phase 5: Product Listing/Shop Page + +### Layout: +``` +┌─────────────────────────────────────────────────────┐ +│ [Header] │ +├─────────────────────────────────────────────────────┤ +│ All Products [Sort] +├─────────────────────────────────────────────────────┤ +│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ +│ │ [Image] │ │ [Image] │ │ [Image] │ │ +│ │ │ │ │ │ │ │ +│ │ Product │ │ Product │ │ Product │ │ +│ │ £XX.00 │ │ £XX.00 │ │ £XX.00 │ │ +│ └──────────┘ └──────────┘ └──────────┘ │ +│ │ +│ [Load More / Pagination] │ +└─────────────────────────────────────────────────────┘ +``` + +### Product Card Specifications: +- Image: Square aspect ratio, object-cover +- Product name: 14-16px, single line, truncate +- Price: 14px, below name +- Hover: Slight image zoom, shadow +- Clean white background + +### TODOs: +- [ ] Redesign ProductCard.tsx +- [ ] Create grid layout (3 columns desktop, 2 tablet, 1 mobile) +- [ ] Add sorting dropdown +- [ ] Implement hover effects +- [ ] Add pagination or infinite scroll + +--- + +## Phase 6: Cart Drawer & Checkout Flow + +### Cart Drawer Design: +``` +┌──────────────────────────────────┐ +│ YOUR CART [X] │ +├──────────────────────────────────┤ +│ │ +│ ┌────┐ Product Name 🗑️ │ +│ │IMG │ Variant info │ +│ └────┤ [-] 1 [+] £XX.00 │ +│ │ +│ ─────────────────────────────── │ +│ │ +│ ┌────┐ Another Product │ +│ │IMG │ [-] 2 [+] £XX.00 │ +│ └────┘ │ +│ │ +├──────────────────────────────────┤ +│ Subtotal £XX.00 │ +│ Shipping FREE │ +├──────────────────────────────────┤ +│ TOTAL £XX.00 │ +│ │ +│ [CHECKOUT - Black Button] │ +│ [Continue Shopping] │ +└──────────────────────────────────┘ +``` + +### Specifications: +- Slide in from right +- Width: 400px desktop, 100% mobile +- Backdrop blur/overlay +- Quantity controls (+/-) +- Remove item button +- Clear subtotal/total breakdown +- Prominent checkout CTA + +### Checkout Page: +- Multi-step or single-page +- Shipping info +- Payment method (COD for Serbia) +- Order summary sidebar + +### TODOs: +- [ ] Redesign CartDrawer.tsx with slide-out design +- [ ] Update cart item layout +- [ ] Add quantity stepper controls +- [ ] Style cart totals section +- [ ] Improve checkout button +- [ ] Add backdrop overlay +- [ ] Add empty cart state +- [ ] Test checkout flow end-to-end + +--- + +## Phase 7: Footer & Trust Signals + +### Footer Layout: +``` +┌─────────────────────────────────────────────────────┐ +│ │ +│ [NEWSLETTER SECTION] │ +│ Stay updated with our latest offers │ +│ [Email Input] [Subscribe] │ +│ │ +├─────────────────────────────────────────────────────┤ +│ │ +│ SHOP ABOUT HELP SOCIAL │ +│ - Products - Our Story - FAQ - IG │ +│ - Bundles - Process - Shipping - FB │ +│ - Gifts - Sourcing - Returns - X │ +│ │ +├─────────────────────────────────────────────────────┤ +│ │ +│ [Payment Icons] [Security Badges] │ +│ │ +│ © 2024 ManoonOils. All rights reserved. │ +│ │ +└─────────────────────────────────────────────────────┘ +``` + +### Trust Signals to Add: +- Payment icons (Visa, Mastercard, PayPal) +- Security badges (SSL, Secure checkout) +- Shipping info +- Money-back guarantee + +### TODOs: +- [ ] Redesign Footer.tsx +- [ ] Add newsletter signup section +- [ ] Create link columns +- [ ] Add payment/security badges +- [ ] Add social media links +- [ ] Style copyright section + +--- + +## Phase 8: Mobile Responsive Optimization + +### Breakpoints: +- Mobile: < 640px +- Tablet: 640px - 1024px +- Desktop: > 1024px + +### Mobile-Specific Changes: +- Hamburger menu with full-screen overlay +- Single column product pages +- Bottom sticky add-to-cart bar +- Simplified navigation +- Touch-friendly tap targets (min 44px) + +### TODOs: +- [ ] Test all pages on mobile viewport +- [ ] Add bottom sticky CTA on product pages +- [ ] Optimize images for mobile +- [ ] Ensure touch targets are 44px+ +- [ ] Test mobile navigation flow + +--- + +## Phase 9: Performance & SEO Polish + +### Performance: +- Lazy load images +- Video optimization (WebM + MP4) +- Font preloading +- CSS optimization + +### SEO: +- Meta titles/descriptions +- Structured data (Product schema) +- Open Graph tags +- Alt text for images + +### TODOs: +- [ ] Add Next.js Image optimization +- [ ] Implement lazy loading +- [ ] Add meta tags for all pages +- [ ] Add JSON-LD structured data +- [ ] Optimize Core Web Vitals +- [ ] Add sitemap.xml + +--- + +## Asset Requirements + +### Images Needed: +1. Hero video (MP4/WebM, 1920x1080) +2. Hero poster image (fallback) +3. Product photography (high-res, consistent style) +4. Lifestyle images for homepage sections + +### Icons (Lucide): +- All current icons are good +- May need: Award, Leaf, Droplet (for benefits) + +--- + +## Implementation Order + +### Week 1: Foundation +1. Phase 1: Design System +2. Phase 2: Navigation + +### Week 2: Core Pages +3. Phase 3: Hero Video +4. Phase 4: Product Detail Page + +### Week 3: E-commerce +5. Phase 5: Shop Page +6. Phase 6: Cart & Checkout + +### Week 4: Polish +7. Phase 7: Footer +8. Phase 8: Mobile +9. Phase 9: Performance + +--- + +## Success Metrics + +- [ ] Homepage video loads < 3s +- [ ] Product page LCP < 2.5s +- [ ] Mobile score 90+ on Lighthouse +- [ ] All pages responsive +- [ ] Cart drawer works smoothly +- [ ] No console errors +- [ ] WCAG AA accessibility compliance diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 86afd09..0666a7e 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -8,59 +8,114 @@ export const metadata = { export default function AboutPage() { return ( -
+ <>
- -
-
-

- Our Story -

- -
-

- ManoonOils was born from a passion for natural beauty and the belief - that the best skincare comes from nature itself. Our journey began with - a simple question: how can we create products that truly nurture both - hair and skin? -

- -

- We believe in the power of natural ingredients. Every oil in our - collection is carefully selected for its unique properties and - benefits. From nourishing oils that restore hair vitality to serums - that rejuvenate skin, we craft each product with love and attention - to detail. -

- -

- Our Mission -

-

- Our mission is to provide premium quality, natural products that - enhance your daily beauty routine. We are committed to: -

-
    -
  • Using only the finest natural ingredients
    • -
  • Cruelty-free and ethical production
    • -
  • Sustainable packaging practices
    • -
  • Transparency in our formulations
    • -
- -

- Handmade with Love -

-

- Every bottle of ManoonOils is handcrafted with care. We small-batch - produce our products to ensure the highest quality and freshness. - When you use ManoonOils, you can feel confident that you're using - something made with genuine care and expertise. -

+
+ {/* Page Header */} +
+
+
+ Our Story +

+ About ManoonOils +

+
+
+
+ + {/* Hero Image */} +
+ Natural oils production +
+
+ + {/* Content */} +
+
+
+ {/* Introduction */} +
+

+ ManoonOils was born from a passion for natural beauty and the belief + that the best skincare comes from nature itself. +

+

+ We believe in the power of natural ingredients. Every oil in our + collection is carefully selected for its unique properties and + benefits. From nourishing oils that restore hair vitality to serums + that rejuvenate skin, we craft each product with love and attention + to detail. +

+
+ + {/* Values Grid */} +
+
+

Natural Ingredients

+

+ We use only the finest natural ingredients, sourced ethically and sustainably + from trusted suppliers around the world. +

+
+
+

Cruelty-Free

+

+ Our products are never tested on animals. We believe in beauty + without compromise. +

+
+
+

Sustainable Packaging

+

+ We use eco-friendly packaging materials and minimize waste + throughout our production process. +

+
+
+

Handcrafted Quality

+

+ Every bottle is handcrafted in small batches to ensure + the highest quality and freshness. +

+
+
+ + {/* Mission */} +
+ Our Mission +
+ “To provide premium quality, natural products that enhance + your daily beauty routine.” +
+
+ + {/* Story Section */} +
+

Handmade with Love

+

+ Every bottle of ManoonOils is handcrafted with care. We small-batch + produce our products to ensure the highest quality and freshness. + When you use ManoonOils, you can feel confident that you're using + something made with genuine care and expertise. +

+

+ Our journey began with a simple question: how can we create products + that truly nurture both hair and skin? Today, we continue to innovate + while staying true to our commitment to natural, effective beauty solutions. +

+
-
+
+
+
+ ); } diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx index 5fa8aad..4d30a18 100644 --- a/src/app/checkout/page.tsx +++ b/src/app/checkout/page.tsx @@ -14,6 +14,29 @@ import { CHECKOUT_BILLING_ADDRESS_UPDATE, CHECKOUT_COMPLETE, } from "@/lib/saleor/mutations/Checkout"; +import type { Checkout } from "@/types/saleor"; + +// GraphQL Response Types +interface ShippingAddressUpdateResponse { + checkoutShippingAddressUpdate?: { + checkout?: Checkout; + errors?: Array<{ message: string }>; + }; +} + +interface BillingAddressUpdateResponse { + checkoutBillingAddressUpdate?: { + checkout?: Checkout; + errors?: Array<{ message: string }>; + }; +} + +interface CheckoutCompleteResponse { + checkoutComplete?: { + order?: { number: string }; + errors?: Array<{ message: string }>; + }; +} interface AddressForm { firstName: string; @@ -94,7 +117,7 @@ export default function CheckoutPage() { try { // Update shipping address - const shippingResult = await saleorClient.mutate({ + const shippingResult = await saleorClient.mutate({ mutation: CHECKOUT_SHIPPING_ADDRESS_UPDATE, variables: { checkoutId: checkout.id, @@ -105,12 +128,12 @@ export default function CheckoutPage() { }, }); - if (shippingResult.data?.checkoutShippingAddressUpdate?.errors?.length > 0) { + if (shippingResult.data?.checkoutShippingAddressUpdate?.errors && shippingResult.data.checkoutShippingAddressUpdate.errors.length > 0) { throw new Error(shippingResult.data.checkoutShippingAddressUpdate.errors[0].message); } // Update billing address - const billingResult = await saleorClient.mutate({ + const billingResult = await saleorClient.mutate({ mutation: CHECKOUT_BILLING_ADDRESS_UPDATE, variables: { checkoutId: checkout.id, @@ -121,19 +144,19 @@ export default function CheckoutPage() { }, }); - if (billingResult.data?.checkoutBillingAddressUpdate?.errors?.length > 0) { + if (billingResult.data?.checkoutBillingAddressUpdate?.errors && billingResult.data.checkoutBillingAddressUpdate.errors.length > 0) { throw new Error(billingResult.data.checkoutBillingAddressUpdate.errors[0].message); } // Complete checkout (creates order) - const completeResult = await saleorClient.mutate({ + const completeResult = await saleorClient.mutate({ mutation: CHECKOUT_COMPLETE, variables: { checkoutId: checkout.id, }, }); - if (completeResult.data?.checkoutComplete?.errors?.length > 0) { + if (completeResult.data?.checkoutComplete?.errors && completeResult.data.checkoutComplete.errors.length > 0) { throw new Error(completeResult.data.checkoutComplete.errors[0].message); } @@ -154,9 +177,10 @@ export default function CheckoutPage() { // Order Success Page if (orderComplete) { return ( -
+ <>
-
+
+
@@ -187,16 +211,19 @@ export default function CheckoutPage() {
-
-
+
+
+
+
+ ); } return ( -
+ <>
- -
+
+

Checkout

@@ -457,8 +484,11 @@ export default function CheckoutPage() {
+
-
-
+
+
+
+ ); } diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index 3507e95..02c7072 100644 --- a/src/app/contact/page.tsx +++ b/src/app/contact/page.tsx @@ -3,6 +3,7 @@ import { useState } from "react"; import Header from "@/components/layout/Header"; import Footer from "@/components/layout/Footer"; +import { Mail, MapPin, Truck, Check } from "lucide-react"; export default function ContactPage() { const [formData, setFormData] = useState({ @@ -18,97 +19,185 @@ export default function ContactPage() { }; return ( -
+ <>
- -
-
-

- Contact Us -

- -

- Have questions? We'd love to hear from you. -

- - {submitted ? ( -
-

Thank you for your message!

-

We'll get back to you soon.

+
+ {/* Page Header */} +
+
+
+ Get in Touch +

+ Contact Us +

+

+ Have questions? We'd love to hear from you. +

+
+
+
+ + {/* Contact Section */} +
+
+
+ {/* Contact Info */} +
+

Get in Touch

+

+ We're here to help! Whether you have questions about our products, + need assistance with an order, or just want to say hello, we'd love to hear from you. +

+ +
+
+
+ +
+
+

Email

+

hello@manoonoils.com

+

We reply within 24 hours

+
+
+ +
+
+ +
+
+

Shipping

+

Free shipping over 3,000 RSD

+

Delivered within 2-5 business days

+
+
+ +
+
+ +
+
+

Location

+

Serbia

+

Shipping nationwide

+
+
+
- ) : ( -
-
- - setFormData({ ...formData, name: e.target.value })} - className="w-full px-4 py-3 border border-border focus:outline-none focus:border-foreground" - /> -
- -
- - setFormData({ ...formData, email: e.target.value })} - className="w-full px-4 py-3 border border-border focus:outline-none focus:border-foreground" - /> -
- -
- -