Claude Code Plugins

Community-maintained marketplace

Feedback

pupun-korvat-styling

@Nikojuu/hienohelma
0
0

Complete styling guide for Pupun Korvat jewelry theme. Apply phase by phase for complete restyling. Elegant artisan aesthetic with rose gold accents, corner decorations, and shimmer effects.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name pupun-korvat-styling
description Complete styling guide for Pupun Korvat jewelry theme. Apply phase by phase for complete restyling. Elegant artisan aesthetic with rose gold accents, corner decorations, and shimmer effects.
invocation user

Pupun Korvat - Artisan Jewelry Theme

Brand Voice: Elegant, artisan, warm, personal, Finnish craftsmanship Target Feel: Luxury boutique meets handmade authenticity

Phase 1: Foundation

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)

.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;
}

Phase 2: Layout Components

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Phase 3: Homepage (src/app/(storefront)/page.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

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

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

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

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

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

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

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

Phase 4: Product Pages

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

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)

4.3 LoadingProductCard (src/components/ProductCard.tsx)

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

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

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

4.6 ImageSlider (src/components/ImageSlider.tsx)

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

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

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

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

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

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

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

4.10 PriceDisplay (src/components/PriceDisplay.tsx)

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

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

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

Phase 5: Category Pages

5.1 CategoryListing

  • Uses ProductsPage with category filter
  • Breadcrumbs show category hierarchy

5.2 CategoryCard

  • Part of CategorySection (see Phase 3.3)

Phase 6: Cart & Checkout

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Phase 7: Auth Pages

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)

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

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

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

Phase 8: Customer Dashboard

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

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

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

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

Phase 9: Static Pages

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

  • AboutHero
  • AboutBlock x3 (alternating)
  • AboutCTA

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)

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

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

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

  • Subtitle header
  • ContactForm component

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

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

  • Subtitle header
  • PhotoGallery component

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

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

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

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

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

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

Phase 10: Shared UI Components

10.1 Buttons

Primary CTA:

<button className="inline-flex items-center gap-3 px-8 py-4 bg-charcoal text-warm-white font-secondary text-sm tracking-wider uppercase transition-all duration-300 hover:bg-rose-gold">
  Button Text
  <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
</button>

Secondary/Outline:

<button className="inline-flex items-center gap-3 px-8 py-4 border border-charcoal/30 text-charcoal font-secondary text-sm tracking-wider uppercase transition-all duration-300 hover:border-rose-gold hover:text-rose-gold">
  Button Text
</button>

10.2 Cards

<div className="relative bg-warm-white overflow-hidden group">
  {/* Border frame */}
  <div className="absolute inset-0 border border-rose-gold/10 z-10 pointer-events-none transition-colors duration-500 group-hover:border-rose-gold/30" />

  {/* Corner accents */}
  <div className="absolute top-0 left-0 w-6 h-6 border-l border-t border-rose-gold/30 z-10 transition-all duration-500 group-hover:w-10 group-hover:h-10" />
  <div className="absolute top-0 right-0 w-6 h-6 border-r border-t border-rose-gold/30 z-10 transition-all duration-500 group-hover:w-10 group-hover:h-10" />
  <div className="absolute bottom-0 left-0 w-6 h-6 border-l border-b border-rose-gold/30 z-10 transition-all duration-500 group-hover:w-10 group-hover:h-10" />
  <div className="absolute bottom-0 right-0 w-6 h-6 border-r border-b border-rose-gold/30 z-10 transition-all duration-500 group-hover:w-10 group-hover:h-10" />

  {/* Content */}
</div>

10.3 Badge (src/components/ui/badge.tsx)

  • Variants: default, secondary, destructive, outline
  • CVA variants with transitions

10.4 GlassySquareButton (src/components/ui/cta-button.tsx)

  • Frosted glass effect
  • Arrow icon
  • Shimmer animation borders
  • Hover glow effect

10.5 Forms / Inputs

  • Cream background inputs
  • Rose-gold focus ring
  • Error state styling

10.6 Modals / Dialogs

  • Border frame + corner accents
  • Header with diamond decoration
  • Footer with action buttons

10.7 Loading States

  • Shimmer-gold animation
  • Skeleton placeholders

10.8 Toast Notifications

  • Success: green styling
  • Error: burgundy styling

Decorative Patterns

Diamond Shape

<div className="w-2 h-2 bg-rose-gold/60 diamond-shape" />

.diamond-shape {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Corner Accents

{/* Top corners */}
<div className="absolute top-0 left-0 w-8 h-8 border-l-2 border-t-2 border-rose-gold/40" />
<div className="absolute top-0 right-0 w-8 h-8 border-r-2 border-t-2 border-rose-gold/40" />

{/* Bottom corners */}
<div className="absolute bottom-0 left-0 w-8 h-8 border-l-2 border-b-2 border-rose-gold/40" />
<div className="absolute bottom-0 right-0 w-8 h-8 border-r-2 border-b-2 border-rose-gold/40" />

{/* Animated on hover */}
className="transition-all duration-500 group-hover:w-12 group-hover:h-12 group-hover:border-rose-gold/60"

Gradient Dividers

{/* Full width */}
<div className="h-[1px] bg-gradient-to-r from-transparent via-rose-gold/30 to-transparent" />

{/* Short accent */}
<div className="w-12 h-[1px] bg-gradient-to-r from-rose-gold/60 to-transparent" />

Section Header Pattern

<div className="py-16 md:py-24 text-center">
  {/* Diamond decoration */}
  <div className="flex items-center justify-center gap-4 mb-6">
    <div className="w-2 h-2 bg-rose-gold/60 diamond-shape" />
    <div className="w-16 h-[1px] bg-gradient-to-r from-rose-gold/60 to-champagne/40" />
    <div className="w-1.5 h-1.5 bg-champagne/50 diamond-shape" />
    <div className="w-16 h-[1px] bg-gradient-to-l from-rose-gold/60 to-champagne/40" />
    <div className="w-2 h-2 bg-rose-gold/60 diamond-shape" />
  </div>

  <h2 className="text-4xl md:text-5xl font-primary text-charcoal">
    Section Title
  </h2>

  <p className="mt-4 text-base font-secondary text-charcoal/60 max-w-2xl mx-auto">
    Optional description
  </p>

  {/* Bottom line */}
  <div className="mt-6 h-[1px] bg-gradient-to-r from-transparent via-rose-gold/30 to-transparent max-w-xs mx-auto" />
</div>

Dark Section Pattern

<section className="relative py-24 bg-charcoal overflow-hidden">
  {/* Top gradient line */}
  <div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-rose-gold/30 to-transparent" />

  {/* Corner accents */}
  <div className="absolute top-8 left-8 w-16 h-16 border-l border-t border-rose-gold/20" />

  {/* Floating diamonds */}
  <div className="absolute top-1/4 left-1/4 w-2 h-2 bg-rose-gold/20 diamond-shape" />

  {/* Content with light text */}
  <div className="text-warm-white">
    {/* ... */}
  </div>
</section>

Image Overlays

{/* Gradient from bottom */}
<div className="absolute inset-0 bg-gradient-to-t from-charcoal/70 via-charcoal/20 to-transparent" />

{/* Soft vignette */}
<div className="absolute inset-0 bg-gradient-to-b from-warm-white/40 via-transparent to-warm-white/90" />

Typography Patterns

{/* Hero Title */}
className="text-6xl sm:text-8xl lg:text-9xl font-primary tracking-tight"

{/* Section Titles */}
className="text-4xl md:text-5xl lg:text-6xl font-primary tracking-tight text-charcoal"

{/* Subtitles/Labels */}
className="text-xs tracking-[0.3em] uppercase font-secondary text-charcoal/70"

{/* Body Text */}
className="text-base lg:text-lg font-secondary text-charcoal/70 leading-relaxed"

{/* Small Text */}
className="text-xs text-charcoal/60 font-secondary"

Animation Patterns

Framer Motion - Scroll Fade Up

<motion.div
  initial={{ opacity: 0, y: 30 }}
  animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
  transition={{ duration: 0.8, ease: "easeOut" }}
>

Framer Motion - Staggered Children

const containerVariants = {
  hidden: {},
  visible: {
    transition: { staggerChildren: 0.15 }
  }
};

const itemVariants = {
  hidden: { opacity: 0, y: 30 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease: [0.25, 0.46, 0.45, 0.94] }
  }
};

Framer Motion - Floating

animate={{
  y: [0, -15, 0],
  rotate: [0, 5, 0],
}}
transition={{
  duration: 6,
  repeat: Infinity,
  ease: "easeInOut",
}}

CSS Transition Durations

  • Fast: duration-300
  • Medium: duration-500
  • Slow: duration-700

Responsive Patterns

{/* Hide on mobile, show on desktop */}
className="hidden sm:block"
className="hidden lg:flex"

{/* Show on mobile, hide on desktop */}
className="sm:hidden"
className="lg:hidden"

{/* Responsive grid */}
className="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8"

{/* Responsive text */}
className="text-4xl md:text-5xl lg:text-6xl"

{/* Responsive spacing */}
className="py-16 md:py-24"
className="px-4 sm:px-8"

Image Aspect Ratios

Element Ratio
Hero min-h-screen
Category cards aspect-[3/4]
Product cards aspect-square
About section aspect-[4/5]

Completion Checklist

  • Phase 1: Foundation (colors, fonts, gradients)
  • Phase 2: Layout (Navbar, Footer, Sidebar)
  • Phase 3: Homepage (Hero, Categories, About, Products)
  • Phase 4: Product Pages (Listing, Card, Detail, Gallery)
  • Phase 5: Category Pages
  • Phase 6: Cart & Checkout (Cart, Forms, Payment)
  • Phase 7: Auth Pages (Login, Register, Password Reset)
  • Phase 8: Customer Dashboard (MyPage, Orders, Info, Wishlist)
  • Phase 9: Static Pages (About, Contact, Gallery, Legal)
  • Phase 10: Shared UI Components