pupun-korvat-styling

1.1 Colors (`src/app/globals.css`)

| Role | Name | HSL | Usage |

|------|------|-----|-------|

| primary-accent | rose-gold | 15 45% 65% | Buttons, links, borders, highlights |

| secondary-accent | champagne | 38 45% 78% | Hover states, warm highlights |

| background | warm-white | 30 33% 98% | Main background |

| card-bg | cream | 35 40% 95% | Cards, sections |

| text | charcoal | 20 15% 18% | Headings, dark sections |

| accent-subtle | soft-blush | 350 35% 90% | Subtle accents, icon backgrounds |

| accent-dark | deep-burgundy | 350 45% 30% | Sale badges, alerts, emphasis |

#### Color Usage Rules

1. Backgrounds: Use warm-white as primary, cream for section variation
2. Text: Use charcoal for headings, charcoal/70 or charcoal/60 for body
3. Accents: Use rose-gold for interactive elements, borders, highlights
4. Sales/Emphasis: Use deep-burgundy for sale badges and urgent CTAs
5. Hover States: Transition to rose-gold or champagne on hover

1.2 Fonts (`src/lib/fonts.ts`)

| Role | Font | Usage |

|------|------|-------|

| Primary | Playfair Display | Headings, titles, brand name, prices |

| Secondary | Source Sans 3 | Body text, descriptions, buttons, labels |

1.3 Tailwind Config (`tailwind.config.ts`)

• Border radius: 0px (sharp corners)
• All color variables mapped

1.4 Gradient Utilities (`globals.css`)

```css

.text-gradient-gold {

background: linear-gradient(135deg, hsl(38 50% 55%), hsl(15 45% 65%), hsl(38 50% 55%));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.shimmer-gold {

background: linear-gradient(

110deg,

transparent 20%,

hsl(38 60% 80% / 0.4) 40%,

hsl(38 60% 90% / 0.6) 50%,

hsl(38 60% 80% / 0.4) 60%,

transparent 80%

);

background-size: 200% 100%;

animation: shimmer 3s ease-in-out infinite;

}

```

---

2.1 StickyNavbar (`src/components/Navigation/StickyNavbar.tsx`)

• Fixed header container
• Logo (hidden mobile, visible md+)
• Campaign banner (animated, scroll-aware)
• Navigation content slot

```tsx

```

2.2 Navbar (`src/components/Navigation/Navbar.tsx`)

• Mobile menu trigger (MobileLinks)
• Desktop navigation links (NavbarLinks)
• Customer dropdown (auth menu)
• Shopping cart icon

```tsx

```

2.3 NavbarLinks (`src/components/Navigation/NavbarLinks.tsx`)

• Products dropdown with categories tree
• About, Gallery, Contact links
• Decorative gradient underlines on hover

```tsx

```

2.4 DesktopDropdown (`src/components/Navigation/DesktopDropdown.tsx`)

• Category link with hover state
• Chevron icon toggle
• Recursive submenu dropdown
• Decorative gradient lines

```tsx

```

2.5 MobileLinks (`src/components/Navigation/MobileLinks.tsx`)

• Menu button trigger (hamburger)
• Sheet/Drawer container
• Logo header
• Products section with expand/collapse
• Expandable category list (MobileCategory recursive)
• About, Gallery, Contact links
• Decorative footer divider

```tsx

```

2.6 MobileCategory (`src/components/Navigation/MobileCategory.tsx`)

• Category link
• Expand/collapse button (Plus/Minus icons)
• Nested children with indentation
• Recursive structure

```tsx

```

2.7 CustomerDropdown (`src/components/Navigation/CustomerDropdown.tsx`)

• User icon button trigger
• Dropdown menu (authenticated/unauthenticated states)
• Welcome message, My Page link, Logout button
• Login/Register links

```tsx

```

2.8 Footer (`src/components/Footer.tsx`)

• Decorative gradient top line
• Corner accents (4 corners, hidden mobile)
• Floating diamonds (lg+ only)
• Grid: Logo, Navigation links, Social media
• Decorative divider with diamonds
• Copyright text

```tsx

```

2.9 DashboardSidebar (`src/app/(auth)/(dashboard)/layout.tsx`)

• Sidebar card with border frame and corner accents
• "My Account" header with diamond decoration
• Navigation menu (Overview, Orders, My Info, Wishlist)
• Logout link with danger styling

```tsx

```

---

3.1 Hero (`src/components/Hero.tsx`)

• Decorative corner accents (4 corners)
• Background image with parallax scrolling
• Overlay gradients (horizontal + vertical)
• Floating animated diamond shapes (5 elements)
• Main title with gold gradient
• Subtitle text
• CTA buttons (primary filled, secondary bordered)
• Scroll indicator

```tsx

```

3.2 Subtitle (`src/components/subtitle.tsx`)

• Decorative element (5 diamonds + gradient lines)
• Main h2 title
• Optional description
• Decorative line below (scales in on view)
• Dark mode variant support

```tsx

```

3.3 CategorySection (`src/components/Homepage/CategorySection.tsx`)

• Background gradient
• Grid (1 col mobile, 3 col desktop)
• Category cards with:

- Outer frame border

- Corner accents (4 corners, expand on hover)

- Image container (aspect 3:4)

- Gradient overlays (rose-gold + charcoal)

- Shimmer effect on hover

- Title, description, explore link

- Decorative diamond

```tsx

```

3.4 AboutMeSection (`src/components/Homepage/AboutMeSection.tsx`)

• Background decorations (rotated squares, diamonds)
• Image column with decorative frame
• Corner accents on image
• Floating accent card (100% stat)
• Content: label, heading with gradient, descriptions
• Features grid (3 columns with icons)
• CTA button

```tsx

```

3.5 LatestProducts (inline in page.tsx)

• Gradient background
• Subtitle component
• Desktop grid (2 col mobile, 3 col desktop)
• ProductCard components
• View all link with arrow
• Mobile: ProductCarousel

```tsx

```

3.6 FinalCTA (inline in page.tsx)

• Decorative border frame
• Corner accents (4 corners)
• Floating diamond decorations
• Decorative header with diamonds
• Heading, description
• CTA button group

```tsx

```

3.7 ProductCarousel (`src/components/Product/ProductCarousel.tsx`)

• Carousel wrapper (mobile-only)
• ProductCard items
• Loop functionality

```tsx

```

---

4.1 ProductsPage (`src/app/(storefront)/products/[...slug]/page.tsx`)

• Breadcrumb navigation
• Sort options
• Product grid (2 col mobile, 3 col desktop)
• Pagination
• Empty state card with corner accents and diamonds

```tsx

```

4.2 ProductCard (`src/components/ProductCard.tsx`)

• Card frame border (transitions on hover)
• Corner accents (4, expand on hover)
• Image with aspect-square
• Overlay gradient on hover
• Sale badge (top-left, burgundy)
• Share button (top-right, appears on hover)
• View product indicator (slides up on hover)
• Product name (clamped 2 lines)
• Price display (sale + normal)
• Availability indicator (dot + text)
• Decorative gradient line (expands on hover)

```tsx

```

4.3 LoadingProductCard (`src/components/ProductCard.tsx`)

• Card frame with corner accents
• Image skeleton with shimmer-gold
• Content skeleton (3 lines)

```tsx

```

4.4 ProductDetail (`src/components/Product/ProductDetail.tsx`)

• Breadcrumbs navigation
• Image gallery (desktop: ImageSliderWithZoom, mobile: ImageSlider)
• Product name (h1)
• Decorative gradient line
• Price section
• Description
• Stock status indicator
• Variations section (if applicable)
• Wishlist + Add to cart buttons

```tsx

```

4.5 ImageSliderWithZoom (`src/components/imageSliderWithZoom.tsx`)

• Main image container with corner accents
• Zoom cursor + zoom indicator
• Navigation buttons (chevrons)
• Zoom panel (400x400, 2.5x scale)
• Thumbnails grid (5 columns)
• Selected thumbnail rose-gold ring

```tsx

```

4.6 ImageSlider (`src/components/ImageSlider.tsx`)

• Main image container with corner accents
• Navigation buttons
• Thumbnails grid (3 columns)
• Selected thumbnail rose-gold ring

```tsx

```

4.7 SortOptions (`src/components/Product/SortOptions.tsx`)

• Label "Järjestä:"
• Sort buttons (newest, price low/high, popular)
• Active state: rose-gold border + background

```tsx

```

4.8 PaginationComponent (`src/components/Product/Pagination.tsx`)

• Previous/Next buttons
• Page links with ellipsis
• Hidden on mobile

```tsx

```

4.9 Breadcrumbs (`src/components/Product/Breadcrumbs.tsx`)

• Products link
• Category breadcrumb trail
• Current item (not a link)
• ChevronRight separators

```tsx

```

4.10 PriceDisplay (`src/components/PriceDisplay.tsx`)

• Sale percentage badge (red)
• Original price (strikethrough, gray)
• Current/sale price (bold, large)

```tsx

```

4.11 WishlistButton (`src/components/Product/WishlistButton.tsx`)

• Button with outline variant
• Heart icon
• Loading spinner
• Toast notifications

```tsx

```

---

5.1 CategoryListing

• Uses ProductsPage with category filter
• Breadcrumbs show category hierarchy

```tsx

```

5.2 CategoryCard

• Part of CategorySection (see Phase 3.3)

```tsx

```

---

6.1 CartPage (`src/app/(storefront)/cart/page.tsx`)

• Cart items list (left column)
• Order summary sidebar (right column)
• Checkout validation banner
• Empty cart state with decorative elements
• Campaign savings display
• Free shipping badge
• Checkout button
• Continue shopping link

```tsx

```

6.2 CartSheet (`src/components/Cart/Cart.tsx`)

• Sheet trigger with item count badge
• Cart items scrollable list
• Footer with totals
• Campaign savings
• Free shipping status
• Empty cart state with image
• Checkout button

```tsx

```

6.3 CartItem (`src/components/Cart/CartItem.tsx`)

• Product image thumbnail
• Product name and options
• Campaign info (paid vs free)
• Price display with sale badge
• Quantity increment/decrement
• Remove button

```tsx

```

6.4 CampaignAddedCartItems (`src/components/Cart/CampaignAddedCartItems.tsx`)

• Product image with hover zoom
• Product name as link
• Variation options
• Price display
• Quantity controls
• Campaign discount banner
• Remove button

```tsx

```

6.5 AddToCartButton (`src/components/Cart/AddToCartButton.tsx`)

• Button states (Add, Added, Out of Stock)
• Loading state
• Disabled when out of stock

```tsx

```

6.6 CheckoutButton (`src/components/Cart/CheckoutButton.tsx`)

• Submit button with pending state
• Loading spinner
• Disabled styling

```tsx

```

6.7 CheckoutSteps (`src/components/Checkout/CheckoutSteps.tsx`)

• Progress bar (background + active line)
• Step circles (completed, current, upcoming)
• Step titles
• Checkmark for completed
• Diamond accent on current

```tsx

```

6.8 CustomerDataForm (`src/components/Checkout/CustomerDataForm.tsx`)

• Form card with border frame + corner accents
• Header with diamond decoration
• Name fields (2-column desktop)
• Email, address, postal/city, phone fields
• Decorative divider
• Submit button
• Field error messages

```tsx

```

6.9 SelectShipmentMethod (`src/components/Checkout/SelectShipmentMethod.tsx`)

• Header with diamond elements
• Home delivery section
• Radio group for shipment selection
• Parcel locker section with grid
• Shipment cards with corner accents
• Parcel location cards with carrier logo
• Show more/less button
• Free shipping display

```tsx

```

6.10 StripeCheckoutPage (`src/components/Checkout/StripeCheckoutPage.tsx`)

• Checkout steps (3 steps)
• Step 1: CustomerDataForm
• Step 2: SelectShipmentMethod
• Back button, Continue button

```tsx

```

6.11 PaytrailCheckoutPage (`src/components/Checkout/PaytrailCheckoutPage.tsx`)

• Checkout steps (3 steps)
• Step 1: CustomerDataForm
• Step 2: SelectShipmentMethod
• Step 3: PaymentSelection
• Back/Continue buttons

```tsx

```

6.12 PaytrailPaymentSelection (`src/components/Checkout/PaytrailPaymentSelection.tsx`)

• Header with diamond elements
• Payment groups display
• Group cards with corner accents
• Provider buttons grid (2-5 columns)
• Provider logos with hover effects

```tsx

```

---

7.1 LoginForm (`src/components/Auth/Loginform.tsx`)

• Page title subtitle
• Form card with border frame + corner accents
• Header with diamond decoration
• Email + password fields
• Show/hide password toggle
• Error/success message banners
• Forgot password link
• Decorative divider
• Login button
• Resend verification button (conditional)

```tsx

```

7.2 RegisterForm (`src/components/Auth/RegisterForm.tsx`)

• Page title subtitle
• Form card with border frame + corner accents
• Header with diamond decoration
• Name fields (2-column desktop)
• Email + password fields
• Show/hide password toggle
• Decorative divider
• Register button
• Field error messages

```tsx

```

7.3 ForgotPasswordForm (`src/components/Auth/ForgotPasswordForm.tsx`)

• Page title subtitle
• Form card with border frame + corner accents
• Header with diamond decoration
• Description text
• Email field
• Error/success banners
• Decorative divider
• Submit button
• Back to login link

```tsx

```

7.4 ResetPasswordForm (`src/components/Auth/ResetPasswordForm.tsx`)

• Page title subtitle
• Form card with border frame + corner accents
• Header with diamond decoration
• Description text
• Password + confirm password fields
• Show/hide toggles
• Error/success banners
• Decorative divider
• Submit button

```tsx

```

---

8.1 MyPage (`src/app/(auth)/(dashboard)/mypage/page.tsx`)

• Header with diamond decoration + subtitle
• Welcome card with border frame + corner accents
• Welcome message with user's name
• 3-column feature cards grid:

- My Orders

- My Info

- Newsletter

• Cards with expandable corner accents on hover

```tsx

```

8.2 MyOrdersPage (`src/app/(auth)/(dashboard)/myorders/page.tsx`)

• Header with diamond decoration + subtitle
• Order count display
• Empty state card (icon, message, browse link)
• Order cards with:

- Order number + date

- Status badge (color-coded + icon)

- Total amount

- Order items list (image, name, variation, qty, price)

- Tracking number

• Corner accents on hover
• Status indicators: Pending, Paid, Shipped, Completed, Refunded

```tsx

```

8.3 EditCustomerForm (`src/components/CustomerDashboard/EditCustomerForm.tsx`)

• Header with diamond decoration + subtitle
• Profile form card with border + corner accents
• User icon header
• Name fields (2-column desktop)
• Email field
• Decorative divider
• Save button
• Success/error banners
• Account deletion section (danger styling):

- Red border + corner accents

- Warning list

- Delete button

- Confirmation dialog

```tsx

```

8.4 WishlistPage (`src/app/(auth)/(dashboard)/mywishlist/page.tsx`)

• Header with diamond decoration + subtitle
• Item count display
• Empty state card (heart icon, message, browse link)
• Wishlist items:

- Product image thumbnail

- Product name as link

- Variation options

- Price + sale badge

- Added date

- View product button

- Delete button

• Corner accents on hover

```tsx

```

---

9.1 AboutPage (`src/app/(storefront)/about/page.tsx`)

• AboutHero
• AboutBlock x3 (alternating)
• AboutCTA

```tsx

```

9.2 AboutHero (`src/components/Aboutpage/AboutHero.tsx`)

• Background decorative diamonds + gradient lines
• Small label with decorative lines
• Main h1 title
• Decorative element with diamonds
• Description paragraph
• Scroll indicator
• Side corner frames (4 corners)

```tsx

```

9.3 AboutBlock (`src/components/Aboutpage/AboutBlock.tsx`)

• Image container with decorative frame + corner accents
• Image wrapper with aspect ratio
• Content card with border + diamond
• h3 title
• Paragraph content
• Bottom decorative line

```tsx

```

9.4 AboutCTA (`src/components/Aboutpage/AboutCTA.tsx`)

• Top/bottom gradient lines
• Corner accents (4 corners)
• Floating animated diamonds
• Decorative header with diamonds
• h2 title + description
• CTA buttons (primary + secondary)
• Social links with Instagram

```tsx

```

9.5 ContactPage (`src/app/(storefront)/contact/page.tsx`)

• Subtitle header
• ContactForm component

```tsx

```

9.6 ContactForm (`src/components/Contactpage/ContactForm.tsx`)

• Form card with border + corner accents
• Name fields (firstName, lastName)
• Email field
• Message textarea
• Submit button
• Form status message
• Alternative contact info section

```tsx

```

9.7 GalleryPage (`src/app/(storefront)/gallery/page.tsx`)

• Subtitle header
• PhotoGallery component

```tsx

```

9.8 PhotoGallery (`src/components/Aboutpage/PhotoGallery.tsx`)

• Masonry photo album
• Lightbox with thumbnails + zoom
• Image hover scale effect

```tsx

```

9.9 PrivacyPolicyPage (`src/app/(storefront)/privacy-policy/page.tsx`)

• Main h1 heading
• Multiple sections (h2 + paragraphs + lists)
• Typography hierarchy

```tsx

```

9.10 TermsPage (`src/app/(storefront)/terms/page.tsx`)

• Main h1 heading
• Multiple sections (h2/h3 + paragraphs + lists)
• Typography hierarchy

```tsx

```

---

10.1 Buttons

Primary CTA:

```tsx

Button Text

```

Secondary/Outline:

```tsx

Button Text

```

10.2 Cards

```tsx