diff options
Diffstat (limited to 'frontend/src/app')
| -rw-r--r-- | frontend/src/app/globals.css | 686 | ||||
| -rw-r--r-- | frontend/src/app/layout.tsx | 18 | ||||
| -rw-r--r-- | frontend/src/app/loading.tsx | 54 | ||||
| -rw-r--r-- | frontend/src/app/men/page.tsx | 178 | ||||
| -rw-r--r-- | frontend/src/app/page.tsx | 117 | ||||
| -rw-r--r-- | frontend/src/app/products/[id]/page.tsx | 32 | ||||
| -rw-r--r-- | frontend/src/app/unisex/page.tsx | 178 | ||||
| -rw-r--r-- | frontend/src/app/women/page.tsx | 178 |
8 files changed, 757 insertions, 684 deletions
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 5e91d83..8b5bbb3 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -3,13 +3,10 @@ @custom-variant dark (&:is(.dark *)); -/* Custom responsive breakpoints */ -@custom-variant xs (&:is(@media (min-width: 475px) *)); - @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif; + --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace; --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); @@ -124,698 +121,137 @@ } } -/* Complete override for ghost variant default styles */ -/* This targets the specific ghost variant classes from the button component */ +/* Simple transparent navigation buttons */ .nav-button-transparent { background: transparent !important; background-color: transparent !important; - background-image: none !important; border: none !important; - border-color: transparent !important; box-shadow: none !important; - --tw-bg-opacity: 0 !important; - --accent: transparent !important; - --background: transparent !important; - --tw-border-opacity: 0 !important; - --tw-shadow: none !important; - --tw-ring-shadow: none !important; - --tw-ring-offset-shadow: none !important; - cursor: pointer !important; + backdrop-filter: none !important; + border-radius: 0 !important; + transition: color 0.2s ease !important; } -/* Force override ghost variant styles completely */ -button[class*="nav-button-transparent"], -[data-slot="button"][class*="nav-button-transparent"], -[data-slot="navigation-menu-trigger"][class*="nav-button-transparent"] { +/* Remove all hover backgrounds */ +.nav-button-transparent:hover { background: transparent !important; background-color: transparent !important; - border: none !important; box-shadow: none !important; -} - -/* Override ghost variant hover specifically */ -button[class*="nav-button-transparent"][class*="hover:bg-accent"], -[data-slot="button"][class*="nav-button-transparent"][class*="hover:bg-accent"], -[data-slot="navigation-menu-trigger"][class*="nav-button-transparent"][class*="hover:bg-accent"] { - background: transparent !important; - background-color: transparent !important; - border: none !important; -} - -/* Dark mode ghost variant overrides */ -.dark button[class*="nav-button-transparent"][class*="dark:hover:bg-accent"], -.dark [data-slot="button"][class*="nav-button-transparent"][class*="dark:hover:bg-accent"], -.dark [data-slot="navigation-menu-trigger"][class*="nav-button-transparent"][class*="dark:hover:bg-accent"] { - background: transparent !important; - background-color: transparent !important; - border: none !important; -} - -/* Remove focus rings and outlines for nav buttons */ -.nav-button-transparent:focus, -.nav-button-transparent:focus-visible { - outline: none !important; - ring: none !important; - --tw-ring-shadow: none !important; - border: none !important; - background: transparent !important; - background-color: transparent !important; -} - -/* Light mode subtle hover effects - only show on hover */ -.nav-button-transparent:hover { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - --tw-bg-opacity: 1 !important; + backdrop-filter: none !important; border: none !important; - transition: background-color 0.2s ease-in-out !important; } -/* Dark mode even more subtle hover effects */ +/* Remove all dark mode hover backgrounds */ .dark .nav-button-transparent:hover { - background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; - transition: background-color 0.2s ease-in-out !important; -} - -/* Override NavigationMenuTrigger specific classes with maximum specificity */ -.nav-button-transparent.bg-background { background: transparent !important; background-color: transparent !important; - border: none !important; -} - -/* Focus states - only subtle background, no borders or rings */ -.nav-button-transparent:focus:not(:hover) { - background: rgba(0, 0, 0, 0.04) !important; - background-color: rgba(0, 0, 0, 0.04) !important; - border: none !important; - box-shadow: none !important; -} - -.dark .nav-button-transparent:focus:not(:hover) { - background: rgba(255, 255, 255, 0.03) !important; - background-color: rgba(255, 255, 255, 0.03) !important; - border: none !important; box-shadow: none !important; -} - -/* Override open states */ -.nav-button-transparent[data-state="open"] { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - border: none !important; -} - -.dark .nav-button-transparent[data-state="open"] { - background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; + backdrop-filter: none !important; border: none !important; } -/* Ensure all shadcn/ui utility classes are overridden with high specificity */ -button.nav-button-transparent, -[data-slot="button"].nav-button-transparent, -[data-slot="navigation-menu-trigger"].nav-button-transparent { +/* Remove all focus backgrounds */ +.nav-button-transparent:focus { background: transparent !important; background-color: transparent !important; - border: none !important; - border-color: transparent !important; - box-shadow: none !important; - cursor: pointer !important; -} - -/* Hover states for all button types */ -button.nav-button-transparent:hover, -[data-slot="button"].nav-button-transparent:hover, -[data-slot="navigation-menu-trigger"].nav-button-transparent:hover { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - border: none !important; - transition: background-color 0.2s ease-in-out !important; - cursor: pointer !important; -} - -/* Focus states for all button types */ -button.nav-button-transparent:focus, -[data-slot="button"].nav-button-transparent:focus, -[data-slot="navigation-menu-trigger"].nav-button-transparent:focus { - background: rgba(0, 0, 0, 0.04) !important; - background-color: rgba(0, 0, 0, 0.04) !important; - border: none !important; - box-shadow: none !important; outline: none !important; - cursor: pointer !important; -} - -/* Dark mode hover and focus states */ -.dark button.nav-button-transparent:hover, -.dark [data-slot="button"].nav-button-transparent:hover, -.dark [data-slot="navigation-menu-trigger"].nav-button-transparent:hover { - background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; - border: none !important; - transition: background-color 0.2s ease-in-out !important; - cursor: pointer !important; -} - -.dark button.nav-button-transparent:focus, -.dark [data-slot="button"].nav-button-transparent:focus, -.dark [data-slot="navigation-menu-trigger"].nav-button-transparent:focus { - background: rgba(255, 255, 255, 0.03) !important; - background-color: rgba(255, 255, 255, 0.03) !important; - border: none !important; box-shadow: none !important; - outline: none !important; - cursor: pointer !important; -} - -/* Dropdown and navigation item transparency */ -.nav-dropdown-transparent { - background: rgba(255, 255, 255, 0.85) !important; - backdrop-filter: blur(20px) saturate(180%) !important; - border: 1px solid rgba(255, 255, 255, 0.2) !important; - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.12), - 0 2px 16px rgba(0, 0, 0, 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; - border-radius: 0.75rem !important; -} - -.dark .nav-dropdown-transparent { - background: rgba(15, 15, 15, 0.85) !important; - border: 1px solid rgba(82, 82, 82, 0.3) !important; - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.4), - 0 2px 16px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; -} - -.nav-dropdown-item { - background: transparent !important; - border: none !important; - transition: background-color 0.2s ease-in-out !important; -} - -.nav-dropdown-item:hover { - background: rgba(0, 0, 0, 0.08) !important; - border: none !important; -} - -.dark .nav-dropdown-item:hover { - background: rgba(255, 255, 255, 0.08) !important; - border: none !important; -} - -/* Additional overrides for complete transparency */ -/* Handle any remaining shadcn/ui styling conflicts */ -.nav-button-transparent[data-variant="ghost"] { - background: transparent !important; - background-color: transparent !important; - border: none !important; - cursor: pointer !important; -} - -.nav-button-transparent[data-variant="ghost"]:hover { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - border: none !important; - cursor: pointer !important; -} - -.dark .nav-button-transparent[data-variant="ghost"]:hover { - background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; - border: none !important; - cursor: pointer !important; -} - -/* Override any remaining background utilities */ -.nav-button-transparent.bg-transparent, -.nav-button-transparent.bg-accent, -.nav-button-transparent.hover\:bg-accent, -.nav-button-transparent.focus\:bg-accent { - background: transparent !important; - background-color: transparent !important; - border: none !important; - cursor: pointer !important; -} - -/* Ensure link elements in navigation also have transparent styling */ -a.nav-button-transparent { - background: transparent !important; - background-color: transparent !important; - border: none !important; - text-decoration: none !important; - cursor: pointer !important; -} - -a.nav-button-transparent:hover { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - border: none !important; - text-decoration: none !important; - cursor: pointer !important; -} - -.dark a.nav-button-transparent:hover { - background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; - border: none !important; - text-decoration: none !important; - cursor: pointer !important; -} - -/* Ultra-specific overrides to ensure transparency takes precedence */ -/* Handle all possible combinations of button classes */ -button.nav-button-transparent.hover\:bg-accent, -button.nav-button-transparent.dark\:hover\:bg-accent\/50, -button.nav-button-transparent[class*="hover:bg"], -[data-slot="button"].nav-button-transparent.hover\:bg-accent, -[data-slot="button"].nav-button-transparent.dark\:hover\:bg-accent\/50, -[data-slot="button"].nav-button-transparent[class*="hover:bg"], -[data-slot="navigation-menu-trigger"].nav-button-transparent.hover\:bg-accent, -[data-slot="navigation-menu-trigger"].nav-button-transparent.dark\:hover\:bg-accent\/50, -[data-slot="navigation-menu-trigger"].nav-button-transparent[class*="hover:bg"] { - background: transparent !important; - background-color: transparent !important; + backdrop-filter: none !important; border: none !important; } -/* Override any CSS custom properties that might affect background */ -.nav-button-transparent { - --tw-bg-accent: transparent !important; - --tw-bg-background: transparent !important; - --tw-bg-muted: transparent !important; - --tw-bg-secondary: transparent !important; -} - -/* Ensure no background on any state for nav buttons */ -.nav-button-transparent, -.nav-button-transparent:not(:hover):not(:focus):not(:active) { +.dark .nav-button-transparent:focus { background: transparent !important; background-color: transparent !important; box-shadow: none !important; + backdrop-filter: none !important; border: none !important; } -/* Maximum specificity overrides - nuclear option for transparency */ -html body header button.nav-button-transparent, -html body header [data-slot="button"].nav-button-transparent, -html body header [data-slot="navigation-menu-trigger"].nav-button-transparent, -html body header div button.nav-button-transparent, -html body header div [data-slot="button"].nav-button-transparent, -html body header div [data-slot="navigation-menu-trigger"].nav-button-transparent { +/* Remove any active state backgrounds */ +.nav-button-transparent:active { background: transparent !important; background-color: transparent !important; - background-image: none !important; - border: none !important; - border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -} - -/* Override any inline styles or computed styles */ -.nav-button-transparent[style*="background"] { - background: transparent !important; - background-color: transparent !important; -} - -/* Target specific button classes that might have background */ -.nav-button-transparent.inline-flex, -.nav-button-transparent[class*="inline-flex"] { - background: transparent !important; - background-color: transparent !important; border: none !important; } -/* Enhanced link element transparency for Sale button and similar nav links */ -/* Apply maximum specificity for link elements in navigation */ -html body header a.nav-button-transparent, -html body header div a.nav-button-transparent, -html body header nav a.nav-button-transparent, -[data-slot="navigation-menu-link"].nav-button-transparent { +.dark .nav-button-transparent:active { background: transparent !important; background-color: transparent !important; - background-image: none !important; - border: none !important; - border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; - cursor: pointer !important; -} - -/* Override any NavigationMenuLink default styles */ -a.nav-button-transparent[data-slot="navigation-menu-link"], -[data-slot="navigation-menu-link"].nav-button-transparent { - background: transparent !important; - background-color: transparent !important; - border: none !important; - box-shadow: none !important; -} - -/* Ensure link hover states maintain transparency in default state */ -a.nav-button-transparent:not(:hover):not(:focus):not(:active) { - background: transparent !important; - background-color: transparent !important; border: none !important; } -/* Specific overrides for NavigationMenuLink component (Sale button) */ -[data-slot="navigation-menu-link"].nav-button-transparent { - background: transparent !important; - background-color: transparent !important; - border: none !important; - box-shadow: none !important; - cursor: pointer !important; +/* Navigation dropdowns */ +.nav-dropdown-transparent { + background: rgba(255, 255, 255, 0.95) !important; + backdrop-filter: blur(20px) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + border-radius: 0.75rem !important; } -/* Override NavigationMenuLink hover and focus states */ -[data-slot="navigation-menu-link"].nav-button-transparent.hover\:bg-accent, -[data-slot="navigation-menu-link"].nav-button-transparent.focus\:bg-accent, -[data-slot="navigation-menu-link"].nav-button-transparent[class*="hover:bg-accent"], -[data-slot="navigation-menu-link"].nav-button-transparent[class*="focus:bg-accent"], -[data-slot="navigation-menu-link"].nav-button-transparent[class*="data-[active=true]:bg-accent"] { - background: transparent !important; - background-color: transparent !important; - border: none !important; +.dark .nav-dropdown-transparent { + background: rgba(23, 23, 23, 0.95) !important; + border: 1px solid rgba(82, 82, 82, 0.4) !important; } -/* Override NavigationMenuLink data states */ -[data-slot="navigation-menu-link"].nav-button-transparent[data-active="true"] { +/* Dropdown items */ +.nav-dropdown-item { background: transparent !important; - background-color: transparent !important; border: none !important; + transition: all 0.2s ease !important; } -/* Ensure NavigationMenuLink has proper hover effect */ -[data-slot="navigation-menu-link"].nav-button-transparent:hover { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - border: none !important; - transition: background-color 0.2s ease-in-out !important; -} - -.dark [data-slot="navigation-menu-link"].nav-button-transparent:hover { - background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; -} - -/* Enhanced Theme Toggle Transparency Effects */ -/* Theme toggle specific enhancements for better navbar integration */ -.nav-button-transparent.group { - position: relative; - overflow: hidden; - backdrop-filter: blur(8px) saturate(150%); - border-radius: 0.5rem; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Enhanced hover state for theme toggle */ -.nav-button-transparent.group:hover { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - transform: scale(1.05); - backdrop-filter: blur(12px) saturate(180%); +.nav-dropdown-item:hover { + background: rgba(0, 0, 0, 0.06) !important; } -.dark .nav-button-transparent.group:hover { +.dark .nav-dropdown-item:hover { background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; -} - -/* Active state for theme toggle */ -.nav-button-transparent.group:active { - transform: scale(0.95); - transition: transform 0.1s ease-in-out; -} - -/* Enhanced focus state for theme toggle */ -.nav-button-transparent.group:focus-visible { - background: rgba(0, 0, 0, 0.04) !important; - background-color: rgba(0, 0, 0, 0.04) !important; - box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important; - outline: none !important; -} - -.dark .nav-button-transparent.group:focus-visible { - background: rgba(255, 255, 255, 0.03) !important; - background-color: rgba(255, 255, 255, 0.03) !important; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important; -} - - -/* Enhanced dropdown items for theme toggle */ -.nav-dropdown-item.group\/item { - background: transparent !important; - border: none !important; - border-radius: 0.5rem !important; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; - margin: 2px !important; - padding: 0.5rem 0.75rem !important; -} - -.nav-dropdown-item.group\/item:hover { - background: rgba(0, 0, 0, 0.08) !important; - backdrop-filter: blur(8px) !important; - transform: translateX(2px) !important; -} - -.dark .nav-dropdown-item.group\/item:hover { - background: rgba(255, 255, 255, 0.08) !important; -} - -/* Smooth icon transitions for theme toggle */ -.nav-button-transparent.group svg { - transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); - filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); -} - -.dark .nav-button-transparent.group svg { - filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); -} - -/* Enhanced glow effect for theme toggle */ -.nav-button-transparent.group:hover svg { - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); -} - -.dark .nav-button-transparent.group:hover svg { - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); -} - -/* Ultra-smooth dropdown animations */ -@keyframes dropdown-in { - from { - opacity: 0; - transform: scale(0.95) translateY(-4px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -@keyframes dropdown-out { - from { - opacity: 1; - transform: scale(1) translateY(0); - } - to { - opacity: 0; - transform: scale(0.95) translateY(-4px); - } -} - -/* Apply dropdown animation to nav dropdowns */ -.nav-dropdown-transparent[data-state="open"] { - animation: dropdown-in 0.2s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Improved checkmark animation */ -.nav-dropdown-item span[class*="animate-in"] { - animation: checkmark-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -@keyframes checkmark-in { - from { - opacity: 0; - transform: scale(0.3) rotate(-12deg); - } - to { - opacity: 1; - transform: scale(1) rotate(0deg); - } } -/* Prevent any conflicting backgrounds on theme toggle */ -.nav-button-transparent.group[data-state="open"] { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - border: none !important; - transform: scale(1.05); +/* Prevent flash of unstyled content */ +html { + visibility: hidden; + opacity: 0; } -.dark .nav-button-transparent.group[data-state="open"] { - background: rgba(255, 255, 255, 0.08) !important; - backdrop-filter: blur(8px) !important; - border-radius: 0.5rem !important; +html.loaded { + visibility: visible; + opacity: 1; + transition: opacity 0.1s ease-in-out; } -/* Mobile-friendly enhancements */ -@media (max-width: 768px) { - /* Ensure touch targets are at least 44px */ - .touch-manipulation { - touch-action: manipulation; - -webkit-tap-highlight-color: transparent; - } - - /* Better mobile spacing for action buttons */ - .mobile-action-buttons { - gap: 0.25rem !important; - } - - /* Mobile menu improvements */ - .mobile-menu-item { - min-height: 44px; - padding: 0.75rem 1rem; - display: flex; - align-items: center; - justify-content: space-between; - border-radius: 0.5rem; - transition: all 0.2s ease-in-out; - } - - .mobile-menu-item:active { - transform: scale(0.98); - background: rgba(0, 0, 0, 0.05); - } - - .dark .mobile-menu-item:active { - background: rgba(255, 255, 255, 0.05); - } - - /* Prevent text selection on mobile UI elements */ - .no-select { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - - /* Improve mobile sheet content scrolling */ - .mobile-sheet-content { - overscroll-behavior: contain; - -webkit-overflow-scrolling: touch; - } - - /* Hide scrollbar in mobile menu while maintaining scroll functionality */ - [data-radix-dialog-content] { - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* Internet Explorer and Edge */ - } - - [data-radix-dialog-content]::-webkit-scrollbar { - display: none; /* Chrome, Safari, Opera */ - width: 0; - height: 0; - } - - /* Specifically target Sheet content scrolling areas */ - [data-radix-dialog-content] .overflow-y-auto, - [data-radix-dialog-content] .overflow-auto { - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* Internet Explorer and Edge */ - } - - [data-radix-dialog-content] .overflow-y-auto::-webkit-scrollbar, - [data-radix-dialog-content] .overflow-auto::-webkit-scrollbar { - display: none; /* Chrome, Safari, Opera */ - width: 0; - height: 0; - } - - /* Mobile navigation specific scrollbar hiding */ - .mobile-nav-scroll { - scrollbar-width: none !important; /* Firefox */ - -ms-overflow-style: none !important; /* Internet Explorer and Edge */ - } - - .mobile-nav-scroll::-webkit-scrollbar { - display: none !important; /* Chrome, Safari, Opera */ - width: 0 !important; - height: 0 !important; - background: transparent !important; - } - - /* Additional scrollbar hiding for all mobile menu elements */ - [data-radix-dialog-content] *, - [data-radix-dialog-content] *::-webkit-scrollbar { - scrollbar-width: none !important; - -ms-overflow-style: none !important; - display: none !important; - width: 0 !important; - height: 0 !important; - } +/* Ensure smooth theme transitions */ +* { + transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; } -/* Small mobile optimizations */ -@media (max-width: 475px) { - /* Tighter spacing on very small screens */ - .action-buttons-compact { - gap: 0.125rem !important; - } - - /* Slightly smaller touch targets for very small screens */ - .compact-touch-target { - min-width: 40px !important; - min-height: 40px !important; - } - - /* Reduce header height on very small screens */ - .compact-header { - height: 3.5rem !important; /* 56px */ - } +/* Prevent layout shifts during hydration */ +img[priority] { + content-visibility: auto; } -/* Accessibility improvements */ -@media (prefers-reduced-motion: reduce) { - .nav-button-transparent, - .nav-dropdown-item, - .mobile-menu-item { - transition: none !important; - animation: none !important; +/* Loading animation */ +@keyframes loading { + 0% { + width: 0%; + transform: translateX(-100%); } -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .nav-button-transparent { - border: 1px solid currentColor !important; + 50% { + width: 100%; + transform: translateX(0%); } - - .nav-dropdown-transparent { - border: 1px solid currentColor !important; - background: var(--background) !important; + 100% { + width: 0%; + transform: translateX(100%); } } -/* Focus visible for keyboard navigation */ -.nav-button-transparent:focus-visible { - outline: 2px solid var(--ring) !important; - outline-offset: 2px !important; -} - -/* Mobile menu icon stroke uniformity */ -.mobile-nav-scroll svg, -[data-radix-dialog-content] svg { - stroke-linecap: round !important; - stroke-linejoin: round !important; -} - -/* Force consistent stroke width for mobile quick action icons */ -@media (max-width: 768px) { - [data-radix-dialog-content] button svg { - stroke-width: inherit !important; - } +/* Ensure loading screen is on top */ +.loading-screen { + z-index: 9999; } diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index ffa571b..60f0601 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -35,6 +35,20 @@ export default function RootLayout({ as="image" type="image/png" /> + <script dangerouslySetInnerHTML={{ + __html: ` + (function() { + function addLoadedClass() { + document.documentElement.classList.add('loaded'); + } + if (document.readyState === 'complete') { + addLoadedClass(); + } else { + window.addEventListener('load', addLoadedClass); + } + })(); + ` + }} /> </head> <body className={`${inter.variable} font-sans antialiased`}> <ThemeProvider @@ -42,8 +56,8 @@ export default function RootLayout({ defaultTheme="system" enableSystem disableTransitionOnChange - > - {children} + > + {children} <Toaster /> </ThemeProvider> </body> diff --git a/frontend/src/app/loading.tsx b/frontend/src/app/loading.tsx new file mode 100644 index 0000000..56455c3 --- /dev/null +++ b/frontend/src/app/loading.tsx @@ -0,0 +1,54 @@ +import Image from "next/image"; + +export default function Loading() { + return ( + <div className="fixed inset-0 z-[9999] bg-background flex items-center justify-center"> + {/* Background pattern */} + <div className="absolute inset-0 bg-gradient-to-br from-background via-background to-muted/20" /> + + {/* Loading content */} + <div className="relative z-10 flex flex-col items-center space-y-4"> + {/* Logo with animation */} + <div className="relative"> + <div className="animate-pulse"> + <Image + src="/black-logo.png" + alt="blcklst" + width={160} + height={50} + className="h-12 w-auto block dark:hidden" + priority + /> + <Image + src="/white-logo.png" + alt="blcklst" + width={160} + height={50} + className="h-12 w-auto hidden dark:block" + priority + /> + </div> + </div> + + {/* Loading text - closer to logo */} + <div className="text-center space-y-3 -mt-2"> + <p className="text-sm text-muted-foreground animate-pulse"> + not everyone gets blcklsted + </p> + + {/* Loading dots */} + <div className="flex items-center justify-center space-x-1"> + <div className="w-2 h-2 bg-foreground/60 rounded-full animate-bounce [animation-delay:-0.3s]"></div> + <div className="w-2 h-2 bg-foreground/60 rounded-full animate-bounce [animation-delay:-0.15s]"></div> + <div className="w-2 h-2 bg-foreground/60 rounded-full animate-bounce"></div> + </div> + </div> + + {/* Progress bar */} + <div className="w-64 h-1 bg-muted rounded-full overflow-hidden"> + <div className="h-full bg-foreground rounded-full animate-[loading_1s_ease-in-out_infinite]"></div> + </div> + </div> + </div> + ); +}
\ No newline at end of file diff --git a/frontend/src/app/men/page.tsx b/frontend/src/app/men/page.tsx new file mode 100644 index 0000000..8c0dd51 --- /dev/null +++ b/frontend/src/app/men/page.tsx @@ -0,0 +1,178 @@ +import { Header } from "@/components/header"; +import { Footer } from "@/components/footer"; +import { ProductCard } from "@/components/product-card"; + +export default function MenPage() { + // Mock men's products data + const menProducts = [ + { + id: "1", + name: "Oversized Cotton Hoodie", + price: 89, + originalPrice: 129, + image: "/api/placeholder/400/500", + images: ["/api/placeholder/400/500", "/api/placeholder/400/500"], + rating: 4.5, + reviewCount: 234, + isNew: true, + isSale: true, + category: "Hoodies", + colors: ["#000000", "#FFFFFF", "#6B7280"], + sizes: ["S", "M", "L", "XL"], + }, + { + id: "2", + name: "Classic Denim Jacket", + price: 159, + originalPrice: 199, + image: "/api/placeholder/400/500", + rating: 4.7, + reviewCount: 189, + isSale: true, + category: "Jackets", + colors: ["#1E40AF", "#000000"], + sizes: ["M", "L", "XL"], + }, + { + id: "3", + name: "Minimal White T-Shirt", + price: 45, + image: "/api/placeholder/400/500", + rating: 4.3, + reviewCount: 456, + isNew: true, + category: "T-Shirts", + colors: ["#FFFFFF", "#000000", "#6B7280"], + sizes: ["XS", "S", "M", "L", "XL"], + }, + { + id: "4", + name: "Cargo Pants", + price: 119, + originalPrice: 149, + image: "/api/placeholder/400/500", + rating: 4.2, + reviewCount: 98, + isSale: true, + category: "Pants", + colors: ["#000000", "#4B5563", "#059669"], + sizes: ["28", "30", "32", "34", "36"], + }, + { + id: "5", + name: "Oxford Button Shirt", + price: 79, + image: "/api/placeholder/400/500", + rating: 4.6, + reviewCount: 156, + category: "Shirts", + colors: ["#FFFFFF", "#3B82F6", "#6B7280"], + sizes: ["S", "M", "L", "XL"], + }, + { + id: "6", + name: "Leather Sneakers", + price: 189, + originalPrice: 229, + image: "/api/placeholder/400/500", + rating: 4.8, + reviewCount: 267, + isSale: true, + category: "Shoes", + colors: ["#FFFFFF", "#000000", "#8B4513"], + sizes: ["8", "9", "10", "11", "12"], + }, + { + id: "7", + name: "Wool Blazer", + price: 299, + image: "/api/placeholder/400/500", + rating: 4.9, + reviewCount: 78, + isNew: true, + category: "Blazers", + colors: ["#000000", "#374151", "#1E40AF"], + sizes: ["S", "M", "L", "XL"], + }, + { + id: "8", + name: "Casual Chinos", + price: 89, + originalPrice: 109, + image: "/api/placeholder/400/500", + rating: 4.4, + reviewCount: 234, + isSale: true, + category: "Pants", + colors: ["#D2B48C", "#000000", "#1F2937"], + sizes: ["28", "30", "32", "34", "36"], + }, + ]; + + return ( + <> + <Header /> + <main className="min-h-screen bg-background"> + {/* Hero Section */} + <section className="relative h-96 bg-gradient-to-r from-neutral-900 to-neutral-700 flex items-center justify-center"> + <div className="text-center text-white space-y-4"> + <h1 className="text-4xl md:text-6xl font-bold">Men's Collection</h1> + <p className="text-lg md:text-xl max-w-2xl mx-auto px-4"> + Discover our latest men's fashion collection featuring premium quality pieces for the modern man + </p> + </div> + </section> + + {/* Filter Section */} + <section className="border-b dark:border-neutral-800 py-6"> + <div className="container mx-auto px-4"> + <div className="flex flex-wrap items-center justify-between gap-4"> + <div className="flex items-center space-x-4"> + <span className="text-sm text-muted-foreground"> + Showing {menProducts.length} products + </span> + </div> + <div className="flex items-center space-x-4"> + <select className="px-3 py-2 border rounded-lg text-sm bg-background"> + <option>Sort by: Featured</option> + <option>Price: Low to High</option> + <option>Price: High to Low</option> + <option>Newest First</option> + <option>Best Rating</option> + </select> + </div> + </div> + </div> + </section> + + {/* Products Grid */} + <section className="py-12"> + <div className="container mx-auto px-4"> + <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> + {menProducts.map((product) => ( + <ProductCard key={product.id} {...product} /> + ))} + </div> + </div> + </section> + + {/* Load More Section */} + <section className="py-12 border-t dark:border-neutral-800"> + <div className="container mx-auto px-4 text-center"> + <button className="px-8 py-3 border border-primary text-primary hover:bg-primary hover:text-primary-foreground transition-colors rounded-lg"> + Load More Products + </button> + </div> + </section> + </main> + <Footer /> + </> + ); +} + +export async function generateMetadata() { + return { + title: "Men's Fashion Collection | blcklst", + description: "Shop the latest men's fashion at blcklst. Premium quality clothing, shoes, and accessories for the modern man.", + }; +}
\ No newline at end of file diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 7d6b7a2..dce3b54 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -2,6 +2,7 @@ import { Header } from "@/components/header"; import { HeroSection } from "@/components/hero-section"; import { ProductCard } from "@/components/product-card"; import { Footer } from "@/components/footer"; +import { PageWrapper } from "@/components/loading"; export default function Home() { // Sample product data for demonstration @@ -86,67 +87,69 @@ export default function Home() { ]; return ( - <div className="min-h-screen bg-background"> - <Header /> - - <main> - <HeroSection /> + <PageWrapper> + <div className="min-h-screen bg-background" suppressHydrationWarning> + <Header /> - {/* Featured Products Section */} - <section className="py-16 bg-white dark:bg-neutral-950"> - <div className="container mx-auto px-4"> - <div className="text-center mb-12"> - <h2 className="text-3xl font-bold mb-4 text-foreground">Featured Products</h2> - <p className="text-muted-foreground max-w-2xl mx-auto"> - Discover our handpicked selection of trending items that our customers love most. - </p> + <main> + <HeroSection /> + + {/* Featured Products Section */} + <section className="py-16 bg-white dark:bg-neutral-950"> + <div className="container mx-auto px-4"> + <div className="text-center mb-12"> + <h2 className="text-3xl font-bold mb-4 text-foreground">Featured Products</h2> + <p className="text-muted-foreground max-w-2xl mx-auto"> + Discover our handpicked selection of trending items that our customers love most. + </p> + </div> + + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> + {featuredProducts.map((product) => ( + <ProductCard key={product.id} {...product} /> + ))} + </div> + + <div className="text-center mt-12"> + <button className="bg-primary text-primary-foreground px-8 py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors"> + View All Products + </button> + </div> </div> - - <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> - {featuredProducts.map((product) => ( - <ProductCard key={product.id} {...product} /> - ))} - </div> - - <div className="text-center mt-12"> - <button className="bg-primary text-primary-foreground px-8 py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors"> - View All Products - </button> - </div> - </div> - </section> + </section> - {/* Categories Section */} - <section className="py-16 bg-neutral-50 dark:bg-neutral-900"> - <div className="container mx-auto px-4"> - <div className="text-center mb-12"> - <h2 className="text-3xl font-bold mb-4">Shop by Category</h2> - <p className="text-muted-foreground"> - Explore our diverse range of fashion categories - </p> - </div> - - <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> - {[ - { name: "Women", image: "/api/placeholder/600/400", count: "2,345+ items" }, - { name: "Men", image: "/api/placeholder/600/400", count: "1,892+ items" }, - { name: "Kids", image: "/api/placeholder/600/400", count: "956+ items" }, - ].map((category) => ( - <div key={category.name} className="group relative overflow-hidden rounded-2xl bg-neutral-100 dark:bg-neutral-800 aspect-[4/3]"> - <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" /> - <div className="absolute bottom-6 left-6 text-white"> - <h3 className="text-2xl font-bold mb-1">{category.name}</h3> - <p className="text-neutral-200">{category.count}</p> + {/* Categories Section */} + <section className="py-16 bg-neutral-50 dark:bg-neutral-900"> + <div className="container mx-auto px-4"> + <div className="text-center mb-12"> + <h2 className="text-3xl font-bold mb-4">Shop by Category</h2> + <p className="text-muted-foreground"> + Explore our diverse range of fashion categories + </p> + </div> + + <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> + {[ + { name: "Women", image: "/api/placeholder/600/400", count: "2,345+ items" }, + { name: "Men", image: "/api/placeholder/600/400", count: "1,892+ items" }, + { name: "Kids", image: "/api/placeholder/600/400", count: "956+ items" }, + ].map((category) => ( + <div key={category.name} className="group relative overflow-hidden rounded-2xl bg-neutral-100 dark:bg-neutral-800 aspect-[4/3]"> + <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" /> + <div className="absolute bottom-6 left-6 text-white"> + <h3 className="text-2xl font-bold mb-1">{category.name}</h3> + <p className="text-neutral-200">{category.count}</p> + </div> + <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" /> </div> - <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" /> - </div> - ))} + ))} + </div> </div> - </div> - </section> - </main> - - <Footer /> - </div> + </section> + </main> + + <Footer /> + </div> + </PageWrapper> ); } diff --git a/frontend/src/app/products/[id]/page.tsx b/frontend/src/app/products/[id]/page.tsx new file mode 100644 index 0000000..31ceded --- /dev/null +++ b/frontend/src/app/products/[id]/page.tsx @@ -0,0 +1,32 @@ +import { Header } from "@/components/header"; +import { Footer } from "@/components/footer"; +import { ProductPage } from "@/components/product-page"; + +interface ProductPageProps { + params: Promise<{ + id: string; + }>; +} + +export default async function Product({ params }: ProductPageProps) { + const { id } = await params; + + return ( + <> + <Header /> + <ProductPage productId={id} /> + <Footer /> + </> + ); +} + +export async function generateMetadata({ params }: ProductPageProps) { + // In a real app, you'd fetch the product data here based on params.id + const { id } = await params; + const productName = id === "1" ? "Oversized Cotton Hoodie" : "Product"; + + return { + title: `${productName} | blcklst`, + description: `Shop the ${productName} at blcklst. Premium quality fashion pieces that define modern elegance.`, + }; +}
\ No newline at end of file diff --git a/frontend/src/app/unisex/page.tsx b/frontend/src/app/unisex/page.tsx new file mode 100644 index 0000000..3c7c0d1 --- /dev/null +++ b/frontend/src/app/unisex/page.tsx @@ -0,0 +1,178 @@ +import { Header } from "@/components/header"; +import { Footer } from "@/components/footer"; +import { ProductCard } from "@/components/product-card"; + +export default function UnisexPage() { + // Mock unisex products data + const unisexProducts = [ + { + id: "17", + name: "Organic Cotton Hoodie", + price: 89, + originalPrice: 119, + image: "/api/placeholder/400/500", + images: ["/api/placeholder/400/500", "/api/placeholder/400/500"], + rating: 4.7, + reviewCount: 342, + isNew: true, + isSale: true, + category: "Hoodies", + colors: ["#000000", "#FFFFFF", "#6B7280", "#059669"], + sizes: ["XS", "S", "M", "L", "XL", "XXL"], + }, + { + id: "18", + name: "Minimalist T-Shirt", + price: 39, + originalPrice: 49, + image: "/api/placeholder/400/500", + rating: 4.5, + reviewCount: 567, + isSale: true, + category: "T-Shirts", + colors: ["#FFFFFF", "#000000", "#6B7280", "#1E40AF"], + sizes: ["XS", "S", "M", "L", "XL", "XXL"], + }, + { + id: "19", + name: "Relaxed Fit Jeans", + price: 119, + image: "/api/placeholder/400/500", + rating: 4.6, + reviewCount: 234, + isNew: true, + category: "Jeans", + colors: ["#4169E1", "#000000", "#6B7280"], + sizes: ["26", "28", "30", "32", "34", "36"], + }, + { + id: "20", + name: "Oversized Sweatshirt", + price: 79, + originalPrice: 99, + image: "/api/placeholder/400/500", + rating: 4.8, + reviewCount: 189, + isSale: true, + category: "Sweatshirts", + colors: ["#F5F5DC", "#000000", "#6B7280", "#059669"], + sizes: ["XS", "S", "M", "L", "XL", "XXL"], + }, + { + id: "21", + name: "Canvas Backpack", + price: 89, + image: "/api/placeholder/400/500", + rating: 4.4, + reviewCount: 156, + category: "Accessories", + colors: ["#000000", "#8B4513", "#6B7280", "#FFFFFF"], + sizes: ["One Size"], + }, + { + id: "22", + name: "Cargo Joggers", + price: 99, + originalPrice: 129, + image: "/api/placeholder/400/500", + rating: 4.3, + reviewCount: 278, + isSale: true, + category: "Pants", + colors: ["#000000", "#6B7280", "#059669", "#8B4513"], + sizes: ["XS", "S", "M", "L", "XL", "XXL"], + }, + { + id: "23", + name: "Bomber Jacket", + price: 159, + image: "/api/placeholder/400/500", + rating: 4.9, + reviewCount: 123, + isNew: true, + category: "Outerwear", + colors: ["#000000", "#1E40AF", "#6B7280", "#8B4513"], + sizes: ["XS", "S", "M", "L", "XL", "XXL"], + }, + { + id: "24", + name: "Classic Sneakers", + price: 129, + originalPrice: 159, + image: "/api/placeholder/400/500", + rating: 4.6, + reviewCount: 445, + isSale: true, + category: "Shoes", + colors: ["#FFFFFF", "#000000", "#6B7280"], + sizes: ["36", "37", "38", "39", "40", "41", "42", "43", "44"], + }, + ]; + + return ( + <> + <Header /> + <main className="min-h-screen bg-background"> + {/* Hero Section */} + <section className="relative h-96 bg-gradient-to-r from-neutral-100 to-neutral-200 dark:from-neutral-800 dark:to-neutral-900 flex items-center justify-center"> + <div className="text-center space-y-4"> + <h1 className="text-4xl md:text-6xl font-bold text-foreground">Unisex Collection</h1> + <p className="text-lg md:text-xl max-w-2xl mx-auto px-4 text-muted-foreground"> + Gender-neutral fashion for everyone. Discover versatile pieces designed for all body types and styles + </p> + </div> + </section> + + {/* Filter Section */} + <section className="border-b dark:border-neutral-800 py-6"> + <div className="container mx-auto px-4"> + <div className="flex flex-wrap items-center justify-between gap-4"> + <div className="flex items-center space-x-4"> + <span className="text-sm text-muted-foreground"> + Showing {unisexProducts.length} products + </span> + </div> + <div className="flex items-center space-x-4"> + <select className="px-3 py-2 border rounded-lg text-sm bg-background"> + <option>Sort by: Featured</option> + <option>Price: Low to High</option> + <option>Price: High to Low</option> + <option>Newest First</option> + <option>Best Rating</option> + </select> + </div> + </div> + </div> + </section> + + {/* Products Grid */} + <section className="py-12"> + <div className="container mx-auto px-4"> + <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> + {unisexProducts.map((product) => ( + <ProductCard key={product.id} {...product} /> + ))} + </div> + </div> + </section> + + {/* Load More Section */} + <section className="py-12 border-t dark:border-neutral-800"> + <div className="container mx-auto px-4 text-center"> + <button className="px-8 py-3 border border-primary text-primary hover:bg-primary hover:text-primary-foreground transition-colors rounded-lg"> + Load More Products + </button> + </div> + </section> + </main> + <Footer /> + </> + ); +} + +export async function generateMetadata() { + return { + title: "Unisex Fashion Collection | blcklst", + description: "Shop gender-neutral fashion at blcklst. Versatile, inclusive clothing designed for all body types and personal styles.", + }; +}
\ No newline at end of file diff --git a/frontend/src/app/women/page.tsx b/frontend/src/app/women/page.tsx new file mode 100644 index 0000000..6814760 --- /dev/null +++ b/frontend/src/app/women/page.tsx @@ -0,0 +1,178 @@ +import { Header } from "@/components/header"; +import { Footer } from "@/components/footer"; +import { ProductCard } from "@/components/product-card"; + +export default function WomenPage() { + // Mock women's products data + const womenProducts = [ + { + id: "9", + name: "Floral Summer Dress", + price: 129, + originalPrice: 169, + image: "/api/placeholder/400/500", + images: ["/api/placeholder/400/500", "/api/placeholder/400/500"], + rating: 4.8, + reviewCount: 324, + isNew: true, + isSale: true, + category: "Dresses", + colors: ["#FFB6C1", "#FFFFFF", "#98FB98"], + sizes: ["XS", "S", "M", "L", "XL"], + }, + { + id: "10", + name: "Silk Blouse", + price: 89, + originalPrice: 119, + image: "/api/placeholder/400/500", + rating: 4.6, + reviewCount: 198, + isSale: true, + category: "Tops", + colors: ["#FFFFFF", "#000000", "#FFB6C1"], + sizes: ["XS", "S", "M", "L"], + }, + { + id: "11", + name: "High-Waist Jeans", + price: 109, + image: "/api/placeholder/400/500", + rating: 4.7, + reviewCount: 456, + isNew: true, + category: "Jeans", + colors: ["#4169E1", "#000000", "#FFFFFF"], + sizes: ["24", "26", "28", "30", "32"], + }, + { + id: "12", + name: "Cashmere Sweater", + price: 199, + originalPrice: 249, + image: "/api/placeholder/400/500", + rating: 4.9, + reviewCount: 167, + isSale: true, + category: "Sweaters", + colors: ["#F5F5DC", "#FFB6C1", "#6B7280"], + sizes: ["XS", "S", "M", "L", "XL"], + }, + { + id: "13", + name: "Leather Handbag", + price: 249, + image: "/api/placeholder/400/500", + rating: 4.5, + reviewCount: 89, + category: "Accessories", + colors: ["#000000", "#8B4513", "#FFFFFF"], + sizes: ["One Size"], + }, + { + id: "14", + name: "Midi Skirt", + price: 79, + originalPrice: 99, + image: "/api/placeholder/400/500", + rating: 4.4, + reviewCount: 234, + isSale: true, + category: "Skirts", + colors: ["#000000", "#FFB6C1", "#6B7280"], + sizes: ["XS", "S", "M", "L", "XL"], + }, + { + id: "15", + name: "Trench Coat", + price: 299, + image: "/api/placeholder/400/500", + rating: 4.8, + reviewCount: 156, + isNew: true, + category: "Outerwear", + colors: ["#F5F5DC", "#000000", "#8B4513"], + sizes: ["XS", "S", "M", "L", "XL"], + }, + { + id: "16", + name: "Ankle Boots", + price: 179, + originalPrice: 219, + image: "/api/placeholder/400/500", + rating: 4.6, + reviewCount: 278, + isSale: true, + category: "Shoes", + colors: ["#000000", "#8B4513", "#6B7280"], + sizes: ["5", "6", "7", "8", "9", "10"], + }, + ]; + + return ( + <> + <Header /> + <main className="min-h-screen bg-background"> + {/* Hero Section */} + <section className="relative h-96 bg-gradient-to-r from-pink-100 to-purple-100 dark:from-pink-900/20 dark:to-purple-900/20 flex items-center justify-center"> + <div className="text-center space-y-4"> + <h1 className="text-4xl md:text-6xl font-bold text-foreground">Women's Collection</h1> + <p className="text-lg md:text-xl max-w-2xl mx-auto px-4 text-muted-foreground"> + Embrace your style with our curated women's fashion collection featuring elegant and contemporary pieces + </p> + </div> + </section> + + {/* Filter Section */} + <section className="border-b dark:border-neutral-800 py-6"> + <div className="container mx-auto px-4"> + <div className="flex flex-wrap items-center justify-between gap-4"> + <div className="flex items-center space-x-4"> + <span className="text-sm text-muted-foreground"> + Showing {womenProducts.length} products + </span> + </div> + <div className="flex items-center space-x-4"> + <select className="px-3 py-2 border rounded-lg text-sm bg-background"> + <option>Sort by: Featured</option> + <option>Price: Low to High</option> + <option>Price: High to Low</option> + <option>Newest First</option> + <option>Best Rating</option> + </select> + </div> + </div> + </div> + </section> + + {/* Products Grid */} + <section className="py-12"> + <div className="container mx-auto px-4"> + <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> + {womenProducts.map((product) => ( + <ProductCard key={product.id} {...product} /> + ))} + </div> + </div> + </section> + + {/* Load More Section */} + <section className="py-12 border-t dark:border-neutral-800"> + <div className="container mx-auto px-4 text-center"> + <button className="px-8 py-3 border border-primary text-primary hover:bg-primary hover:text-primary-foreground transition-colors rounded-lg"> + Load More Products + </button> + </div> + </section> + </main> + <Footer /> + </> + ); +} + +export async function generateMetadata() { + return { + title: "Women's Fashion Collection | blcklst", + description: "Shop the latest women's fashion at blcklst. Elegant dresses, tops, accessories, and more for the modern woman.", + }; +}
\ No newline at end of file |