Wodey/woedii
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'Refactor UI components for improved responsiveness and styling consistency' (#2) from fix/mobile/repsosnsiveness into main

Browse Source 
Reviewed-on: http://35.207.46.142/Wodey/woedii/pulls/2
This commit is contained in:
Software Developer I (Fullstack) & Project Manager 2025-04-29 13:56:10 +00:00
commit 11a60f655a
15 changed files with 318 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/creator/(home)/layout.tsx
View File

@ -1,3 +1,6 @@
'use client'
import { useState } from "react";
import SideNav from "@/components/custom/Side_Nav"; import SideNav from "@/components/custom/Side_Nav";
import Navbar from "@/components/custom/Nav_bar"; import Navbar from "@/components/custom/Nav_bar";
@ -6,17 +9,18 @@ export default function CreatorLayout({
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const [drawerOpen, setDrawerOpen] = useState(false);
return ( return (
<html lang="en"> <html lang="en">
<div className="flex min-h-screen"> <div className="flex min-h-screen">
<div className="fixed left-0 top-0 h-screen"> <div className="fixed left-0 top-0 h-screen w-[280px] lg:w-[380px]">
<SideNav /> <SideNav drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
</div> </div>
<div className="flex flex-col w-full ml-[380px]"> <div className="flex flex-col w-full ml-0 lg:ml-[280px] xl:ml-[380px]">
<div className="fixed top-0 right-0 left-[380px] z-10"> <div className="fixed top-0 right-0 left-0 lg:left-[280px] xl:left-[380px] z-10">
<Navbar /> <Navbar setDrawerOpen={setDrawerOpen} />
</div> </div>
<main className="flex-1 p-6 bg-[#F3F3F3] mt-[75px]">{children}</main> <main className="flex-1 p-4 lg:p-6 bg-[#F3F3F3] mt-[75px] pb-[60px] md:pb-0">{children}</main>
</div> </div>
</div> </div>
</html> </html>

36
app/marketplace/artists/_components/Artist_Content.tsx
View File

@ -115,34 +115,34 @@ const mockItems = [
export default function ArtistContent() { export default function ArtistContent() {
return ( return (
<div className="w-full min-h-screen"> <div className="w-full min-h-screen">
<div className="w-full px-20 mx-auto"> <div className="w-full px-4 sm:px-6 md:px-8 lg:px-20 mx-auto">
<div className="border-b-2 border-[#D1D5DB] mb-8" /> <div className="border-b-2 border-[#D1D5DB] mb-4 sm:mb-6 md:mb-8" />
{/* Header with greeting and filters inside a card */} {/* Header with greeting and filters inside a card */}
<div className="bg-white p-3 rounded-lg shadow-sm py-5 w-full min-h-[46px] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8 border-b-2 border-[#D1D5DB]"> <div className="bg-white p-3 rounded-lg shadow-sm py-4 sm:py-5 w-full min-h-[46px] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 mb-4 sm:mb-6 md:mb-8 border-b-2 border-[#D1D5DB]">
{/* Greeting */} {/* Greeting */}
<div className="flex items-center text-[20px] sm:text-[22px]"> <div className="flex items-center text-base sm:text-lg md:text-xl">
<span className="font-[700] text-[#151C4F] mr-1 text-[16px]">Hi Daphne,</span> <span className="font-[700] text-[#151C4F] mr-1 text-sm sm:text-base">Hi Daphne,</span>
<span className="text-[#555979] font-[700] text-[16px] ">recommendations for you</span> <span className="text-[#555979] font-[700] text-sm sm:text-base">recommendations for you</span>
</div> </div>
{/* Filter Chips */} {/* Filter Chips */}
<div className="flex flex-wrap gap-4"> <div className="flex flex-wrap gap-2 sm:gap-3 md:gap-4">
{['Images','Videos','Audios','Fonts','Gifs','Graphics'].map((filter) => ( {['Images','Videos','Audios','Fonts','Gifs','Graphics'].map((filter) => (
<label key={filter} className="flex items-center gap-2 text-[#151C4F] text-[13px] font-[400] cursor-pointer select-none"> <label key={filter} className="flex items-center gap-1 sm:gap-2 text-[#151C4F] text-xs sm:text-sm font-[400] cursor-pointer select-none">
<Checkbox defaultChecked className="bg-white border-[#E3E6F0] data-[state=checked]:bg-white data-[state=checked]:border-[#151C4F] [&>svg]:text-[#151C4F] data-[state=checked]:text-[#151C4F]" /> <Checkbox defaultChecked className="bg-white border-[#E3E6F0] data-[state=checked]:bg-white data-[state=checked]:border-[#151C4F] [&>svg]:text-[#151C4F] data-[state=checked]:text-[#151C4F]" />
{filter} {filter}
</label> </label>
))} ))}
</div> </div>
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6"> <div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-4 md:gap-6">
{mockItems.map((item, idx) => ( {mockItems.map((item, idx) => (
<div <div
key={idx} key={idx}
className="relative bg-white rounded-sm shadow-sm overflow-hidden group transition hover:shadow-md flex flex-col justify-between" className="relative bg-white rounded-sm shadow-sm overflow-hidden group transition hover:shadow-md flex flex-col justify-between w-full"
style={{ width: 200, height: 178, gap: 9, borderRadius: 6, paddingBottom: 8 }} style={{ height: 'auto', minHeight: '178px', gap: '9px', borderRadius: '6px', paddingBottom: '8px' }}
> >
{/* Image */} {/* Image */}
<div className="relative w-full h-36 flex items-center justify-center bg-gray-100"> <div className="relative w-full aspect-[4/3] flex items-center justify-center bg-gray-100">
<Image <Image
src={item.image} src={item.image}
alt={item.title} alt={item.title}
@ -158,18 +158,18 @@ export default function ArtistContent() {
)} )}
</div> </div>
{/* Card content */} {/* Card content */}
<div className="px-3 pb-2 pt-1 flex flex-col gap-1"> <div className="px-2 sm:px-3 pb-2 pt-1 flex flex-col gap-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="font-semibold text-sm text-[#151C4F] truncate" title={item.title}>{item.title}</span> <span className="font-semibold text-xs sm:text-sm text-[#151C4F] truncate" title={item.title}>{item.title}</span>
<Button variant="ghost" size="icon" className="ml-2"> <Button variant="ghost" size="icon" className="ml-2">
<Heart className="w-5 h-5 text-gray-400 group-hover:text-pink-500 transition" /> <Heart className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-pink-500 transition" />
</Button> </Button>
</div> </div>
<div className="flex items-center justify-between mt-0.5"> <div className="flex items-center justify-between mt-0.5">
<span className="text-xs text-gray-500">In{' '} <span className="text-[10px] sm:text-xs text-gray-500">In{' '}
<span className="capitalize" style={{ color: '#007AFF', fontWeight: 400, fontSize: 12 }}>{item.type}</span> <span className="capitalize" style={{ color: '#007AFF', fontWeight: 400, fontSize: '10px' }}>{item.type}</span>
</span> </span>
<span className="font-bold text-[#151C4F] text-sm">${item.price.toFixed(2)}</span> <span className="font-bold text-[#151C4F] text-xs sm:text-sm">${item.price.toFixed(2)}</span>
</div> </div>
</div> </div>
</div> </div>

47
app/marketplace/artists/_components/Quick_Actions.tsx
View File

@ -39,31 +39,54 @@ export default function QuickActions() {
<div className="relative w-full"> <div className="relative w-full">
{/* Top linear gradient image bar */} {/* Top linear gradient image bar */}
<div className="absolute top-0 left-0 w-full h-3 z-10"> <div className="absolute top-0 left-0 w-full h-3 z-10">
<img src="/GradientMesh_Light.png" alt="Gradient Bar" className="w-full h-full object-cover" /> <Image src="/GradientMesh_Light.png" alt="Gradient Bar" className="w-full h-full object-cover" width={100} height={100} />
</div> </div>
<div <div
className="w-full flex flex-col items-center gap-6 py-8 px-20 relative z-20" className="w-full flex flex-col items-center gap-6 py-4 sm:py-8 px-4 sm:px-8 md:px-12 lg:px-20 relative z-20"
style={{ style={{
background: 'radial-gradient(ellipse at 20% 20%, #f5f7fa 60%, #e8eafc 80%, #f7e7fa 100%, #e3f6fd 100%)', background: 'radial-gradient(ellipse at 20% 20%, #f5f7fa 60%, #e8eafc 80%, #f7e7fa 100%, #e3f6fd 100%)',
minHeight: '100%', minHeight: '100%',
width: '100vw', width: '100%',
}} }}
> >
<div className="flex items-center w-full"> <div className="flex flex-col md:flex-row items-center w-full gap-6 md:gap-8">
<div className="flex items-center mr-8"> <div className="flex items-center">
<Image src="/logo.png" alt="Logo" width={240} height={240} className="object-contain" /> <Image
src="/logo.png"
alt="Logo"
width={240}
height={240}
className="object-contain w-[120px] sm:w-[180px] md:w-[240px]"
/>
</div> </div>
<div className="flex gap-6 flex-1"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4 w-full">
{quickActions.map((action, idx) => ( {quickActions.map((action, idx) => (
<div <div
key={idx} key={idx}
className="bg-white shadow-md flex flex-col items-center justify-center text-center flex-shrink-0" className="bg-white shadow-md flex flex-col items-center justify-center text-center flex-shrink-0"
style={{ width: '150px', height: '170px', padding: '11px 15px', borderRadius: 8, justifyContent: 'space-between', overflow: 'hidden' }} style={{
height: 'auto',
minHeight: '170px',
padding: '11px 15px',
borderRadius: 8,
justifyContent: 'space-between',
overflow: 'hidden'
}}
> >
<Image src={action.image} alt={action.title} width={37.43} height={40.8} className="object-contain mx-auto mb-1" /> <Image
<div className="text-[9px] text-[#151C4F] mb-0.5 w-full font-400">{action.subtitle}</div> src={action.image}
<div className="font-[700] text-[10px] text-[#151C4F] mb-0.5 w-full">{action.title}</div> alt={action.title}
<Button className="w-full h-7 text-[9px] px-0 mt-1 font-400 text-[#1A237E] border-[rgba(48,58,156,0.42)] rounded-sm" variant="outline" asChild> width={37.43}
height={40.8}
className="object-contain mx-auto mb-1 w-[30px] sm:w-[37.43px] h-auto"
/>
<div className="text-[8px] sm:text-[9px] text-[#151C4F] mb-0.5 w-full font-400">{action.subtitle}</div>
<div className="font-[700] text-[9px] sm:text-[10px] text-[#151C4F] mb-0.5 w-full">{action.title}</div>
<Button
className="w-full h-6 sm:h-7 text-[8px] sm:text-[9px] px-0 mt-1 font-400 text-[#1A237E] border-[rgba(48,58,156,0.42)] rounded-sm"
variant="outline"
asChild
>
<a href={action.button.link}>{action.button.label}</a> <a href={action.button.link}>{action.button.label}</a>
</Button> </Button>
</div> </div>

8
app/marketplace/artists/_components/SearchBar.tsx
View File

@ -3,11 +3,8 @@ import { Search } from 'lucide-react';
export default function SearchBar() { export default function SearchBar() {
return ( return (
<div className="flex justify-center w-full my-6"> <div className="flex justify-center w-full my-6 px-4">
<div <div className="flex items-center bg-white rounded-xl shadow-md px-4 w-full max-w-[613px] h-[50px]">
className="flex items-center bg-white rounded-xl shadow-md px-4"
style={{ width: 613, height: 50 }}
>
<select className="bg-transparent outline-none text-gray-700 font-medium pr-2 h-full"> <select className="bg-transparent outline-none text-gray-700 font-medium pr-2 h-full">
<option className="text-[14px] font-400">All</option> <option className="text-[14px] font-400">All</option>
</select> </select>
@ -17,7 +14,6 @@ export default function SearchBar() {
type="text" type="text"
className="flex-1 bg-transparent outline-none text-gray-700 placeholder-gray-400 border-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 h-full" className="flex-1 bg-transparent outline-none text-gray-700 placeholder-gray-400 border-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 h-full"
placeholder="Search images, videos, fonts, graphics and more" placeholder="Search images, videos, fonts, graphics and more"
style={{ height: 48 }}
/> />
</div> </div>
</div> </div>

14
app/marketplace/artists/page.tsx
View File

@ -4,13 +4,15 @@ import SearchBar from './_components/SearchBar';
export default function ArtistsPage() { export default function ArtistsPage() {
return ( return (
<div className="relative bg-[#F3F3F3]"> <div className="relative bg-[#F3F3F3] min-h-screen">
<QuickActions /> <div className="container mx-auto px-4 sm:px-6 lg:px-8">
{/* Overlapping SearchBar */} <QuickActions />
<div className="w-full flex justify-center relative z-30" style={{ marginTop: '-40px' }}> {/* Overlapping SearchBar */}
<SearchBar /> <div className="w-full flex justify-center relative z-30 -mt-8 sm:-mt-10 md:-mt-12">
<SearchBar />
</div>
<ArtistContent />
</div> </div>
<ArtistContent />
</div> </div>
); );
} }

25
components/custom/Best_Seller.tsx
View File

@ -49,35 +49,36 @@ const books = [
export default function BestSeller() { export default function BestSeller() {
return ( return (
<div className="w-full py-8"> <div className="w-full py-4 sm:py-6 md:py-8">
<div className="container-main"> <div className="container-main">
<div className="flex items-center justify-between mb-2 px-2"> <div className="flex items-center justify-between mb-2 px-2">
<h2 className="text-[15px] font-[600] text-[#151C4F]">Best Sellers</h2> <h2 className="text-[14px] sm:text-[15px] font-[600] text-[#151C4F]">Best Sellers</h2>
<a href="#" className="text-[#4F8CFF] text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a> <a href="#" className="text-[#4F8CFF] text-[14px] sm:text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a>
</div> </div>
<div className="border-b-2 border-[#D1D5DB] mb-6 w-full" /> <div className="border-b-2 border-[#D1D5DB] mb-4 sm:mb-6 w-full" />
<div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4 sm:gap-6">
{books.map((book) => ( {books.map((book) => (
<div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}> <div key={book.title} className="flex flex-col w-full">
<div className="relative w-[158px] h-[235px] flex items-center justify-center"> <div className="relative w-full aspect-[2/3] flex items-center justify-center">
<Image <Image
src={book.cover} src={book.cover}
alt={book.title} alt={book.title}
fill fill
style={{ objectFit: 'cover', borderRadius: 4 }} style={{ objectFit: 'cover', borderRadius: 4 }}
className="transition group-hover:scale-105 duration-200" className="transition group-hover:scale-105 duration-200"
sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, (max-width: 1280px) 20vw, (max-width: 1536px) 16vw, 14vw"
/> />
</div> </div>
<div className="px-1 pt-2 flex flex-col gap-1 w-[158px]"> <div className="px-1 pt-2 flex flex-col gap-1 w-full">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span> <span className="font-[400] text-[12px] sm:text-[14px] text-[#151C4F] truncate" title={book.title}>{book.title}</span>
<Button variant="ghost" size="icon" className="ml-2"> <Button variant="ghost" size="icon" className="ml-2">
<Heart className="w-5 h-5 text-gray-400 hover:text-pink-500 transition" /> <Heart className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 hover:text-pink-500 transition" />
</Button> </Button>
</div> </div>
<div className="flex items-center justify-between mt-0.5"> <div className="flex items-center justify-between mt-0.5">
<span className="text-[12px] text-[#555979] font-[400] whitespace-nowrap"><span className="capitalize">{book.author}</span></span> <span className="text-[10px] sm:text-[12px] text-[#555979] font-[400] truncate"><span className="capitalize">{book.author}</span></span>
<span className="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span> <span className="font-[700] text-[#151C4F] text-[12px] sm:text-[14px] whitespace-nowrap">{book.price}</span>
</div> </div>
</div> </div>
</div> </div>

38
components/custom/Frame.tsx
View File

@ -26,10 +26,9 @@ export default function Frame() {
const totalPages = cards.length + 1; const totalPages = cards.length + 1;
return ( return (
<div className="min-h-screen flex flex-col items-center justify-center"> <div className="min-h-screen flex flex-col items-center justify-center p-4">
<div className="w-full max-w-[450px] flex items-center justify-between px-4 py-2 mb-2" style={{ minHeight: 40 }}>
<div className="w-[450px] flex items-center justify-between px-4 py-2 mb-2" style={{ minHeight: 40 }}> <span className="text-[#2633B9] text-sm md:text-[14px] font-[#1A237E400]">Page 1/{totalPages}</span>
<span className="text-[#2633B9] text-[14px] font-[#1A237E400]">Page 1/{totalPages}</span>
<div className="flex gap-2"> <div className="flex gap-2">
<CopyPlus <CopyPlus
size={18} size={18}
@ -44,20 +43,23 @@ export default function Frame() {
</div> </div>
</div> </div>
<div className="flex flex-col items-center gap-4 md:gap-8 w-full max-w-[450px]">
<div className="flex flex-col items-center gap-8"> <div className="w-full flex flex-col items-center">
<div className="w-full max-w-[410px] aspect-[410/510] flex items-center justify-center">
<div className="w-[450px] flex flex-col items-center"> <Image
<div className="w-[410px] h-[510px] flex items-center justify-center"> src="/pdf-image.png"
<Image src="/pdf-image.png" alt="Excerpt Card" width={410} height={510} style={{ objectFit: 'contain' }} /> alt="Excerpt Card"
width={410}
height={510}
className="w-full h-full object-contain"
/>
</div> </div>
</div> </div>
{cards.map((card, index) => ( {cards.map((card, index) => (
<div key={card.id} className="w-[450px] flex flex-col items-center"> <div key={card.id} className="w-full flex flex-col items-center">
<div className="w-full flex items-center justify-between px-4 py-2 mb-2" style={{ minHeight: 40 }}> <div className="w-full flex items-center justify-between px-4 py-2 mb-2" style={{ minHeight: 40 }}>
<span className="text-[#2633B9] text-[14px] font-[#1A237E400]">Page {index + 2}/{totalPages}</span> <span className="text-[#2633B9] text-sm md:text-[14px] font-[#1A237E400]">Page {index + 2}/{totalPages}</span>
<div className="flex gap-2"> <div className="flex gap-2">
<CopyPlus <CopyPlus
size={18} size={18}
@ -71,21 +73,19 @@ export default function Frame() {
/> />
</div> </div>
</div> </div>
<div className="w-[410px] h-[510px] bg-white rounded-lg shadow-md"> <div className="w-full max-w-[410px] aspect-[410/510] bg-white rounded-lg shadow-md">
</div> </div>
</div> </div>
))} ))}
<div className="w-full max-w-[450px] flex justify-center">
<div className="w-[450px] flex justify-center">
<Button <Button
onClick={handleAddCard} onClick={handleAddCard}
variant="outline" variant="outline"
className="flex justify-center items-center gap-2 py-2 text-[#1A237E] font-medium bg-white hover:bg-blue-50 transition-colors shadow-sm" className="flex justify-center items-center gap-2 py-2 text-[#1A237E] font-medium bg-white hover:bg-blue-50 transition-colors shadow-sm w-full max-w-[410px]"
style={{ width: 410 }}
> >
<Plus size={20} className="text-[#1A237E]" /> <Plus size={20} className="text-[#1A237E]" />
<span className="text-center text-[16px] font-[400]">Add new page</span> <span className="text-center text-sm md:text-[16px] font-[400]">Add new page</span>
</Button> </Button>
</div> </div>
</div> </div>

18
components/custom/Home_Banner.tsx
View File

@ -4,18 +4,18 @@ import Image from "next/image";
export default function HomeBanner() { export default function HomeBanner() {
return ( return (
<div className="w-full"> <div className="w-full">
<div className="container-main mt-10"> <div className="container-main mt-4 sm:mt-6 md:mt-8 lg:mt-10">
<div className="relative h-[240px] md:h-[260px] bg-[rgba(255,248,238,0.9)] rounded-2xl overflow-hidden flex items-center justify-between"> <div className="relative h-[200px] sm:h-[220px] md:h-[240px] lg:h-[260px] bg-[rgba(255,248,238,0.9)] rounded-2xl overflow-hidden flex items-center justify-between">
{/* Left: Text Content */} {/* Left: Text Content */}
<div className="z-10 py-8 flex-1 flex flex-col justify-center pl-4 sm:pl-6 md:pl-8 lg:pl-16 pr-4 sm:pr-6 md:pr-8 lg:pr-20"> <div className="z-10 py-4 sm:py-6 md:py-8 flex-1 flex flex-col justify-center pl-3 sm:pl-4 md:pl-6 lg:pl-8 xl:pl-16 pr-3 sm:pr-4 md:pr-6 lg:pr-8 xl:pr-20">
<h1 className="text-[28px] sm:text-[32px] md:text-[35px] font-[500] text-[#151C4F] mb-2 tracking-tight"> <h1 className="text-[24px] sm:text-[28px] md:text-[32px] lg:text-[35px] font-[500] text-[#151C4F] mb-1 sm:mb-2 tracking-tight">
1000 BLACK UMBRELLAS 1000 BLACK UMBRELLAS
</h1> </h1>
<p className="text-[#151C4F] text-[16px] sm:text-[18px] md:text-[21px] font-[400] mb-2 max-w-5xl"> <p className="text-[#151C4F] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[21px] font-[400] mb-2 max-w-5xl">
Poems of absolute nakedness that chase the power of love. Daniel McGinn is<br className="hidden sm:block"/> one of the most admired poets in the underground American poetry scene. Poems of absolute nakedness that chase the power of love. Daniel McGinn is<br className="hidden sm:block"/> one of the most admired poets in the underground American poetry scene.
</p> </p>
<Button <Button
className="bg-transparent border border-[#151C4F] text-[#151C4F] text-[16px] sm:text-[18px] md:text-[21px] w-fit px-4 sm:px-5 md:px-6 py-2 sm:py-3 font-[400] rounded-md mt-4 hover:bg-[#151C4F] hover:text-white transition-all duration-300 cursor-pointer" className="bg-transparent border border-[#151C4F] text-[#151C4F] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[21px] w-fit px-3 sm:px-4 md:px-5 lg:px-6 py-1.5 sm:py-2 md:py-2.5 lg:py-3 font-[400] rounded-md mt-2 sm:mt-3 md:mt-4 hover:bg-[#151C4F] hover:text-white transition-all duration-300 cursor-pointer"
size="lg" size="lg"
> >
PURCHASE EBOOK PURCHASE EBOOK
@ -23,12 +23,12 @@ export default function HomeBanner() {
</div> </div>
{/* Right: Book Cover */} {/* Right: Book Cover */}
<div className="hidden md:block absolute" style={{ top: '85.44px', right: '20px' }}> <div className="hidden md:block absolute" style={{ top: '50%', right: '20px', transform: 'translateY(-50%)' }}>
<Image <Image
src="/book.png" src="/book.png"
alt="1000 Black Umbrellas Book Cover" alt="1000 Black Umbrellas Book Cover"
width={185} width={160}
height={275} height={240}
className="object-contain rounded-xl" className="object-contain rounded-xl"
priority priority
/> />

40
components/custom/Nav_bar.tsx
View File

@ -1,30 +1,42 @@
import { Bell } from 'lucide-react'; import { Bell, Menu } from 'lucide-react';
import { Search } from 'lucide-react'; import { Search } from 'lucide-react';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Dispatch, SetStateAction } from 'react';
export default function Navbar() { export default function Navbar({ setDrawerOpen }: { setDrawerOpen?: Dispatch<SetStateAction<boolean>> }) {
return ( return (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: '24px 40px', background: 'white', width: '100%', height: '75px' }}> <div className="flex items-center justify-between w-full h-[52px] xs:h-[56px] sm:h-[64px] md:h-[75px] bg-white px-2 xs:px-3 sm:px-4 md:px-6 lg:px-10">
<div style={{ flex: 1, display: 'flex', justifyContent: 'flex-end', marginRight: 120 }}> {/* Hamburger menu for mobile */}
<div style={{ display: 'flex', alignItems: 'center', background: '#F2F4F8', borderRadius: '10px', padding: '8px 16px', minWidth: 350 }}> {setDrawerOpen && (
<Search size={20} style={{ color: '#6B7280', marginRight: 8 }} /> <button
className="md:hidden mr-1 xs:mr-2 p-2 rounded-lg hover:bg-gray-100 focus:outline-none"
onClick={() => setDrawerOpen((prev: boolean) => !prev)}
aria-label="Toggle recent designs menu"
>
<Menu size={22} className="xs:w-6 xs:h-6 w-5 h-5" />
</button>
)}
{/* Search bar: hidden on mobile, visible on sm and up */}
<div className="hidden sm:flex flex-1 justify-end mr-1 xs:mr-2 sm:mr-4 md:mr-8 lg:mr-16 xl:mr-32">
<div className="flex items-center bg-[#F2F4F8] rounded-lg p-1 xs:p-1.5 sm:p-2 md:p-3 min-w-[140px] xs:min-w-[180px] sm:min-w-[280px] md:min-w-[320px] lg:min-w-[350px]">
<Search size={15} className="text-[#6B7280] mr-1 xs:mr-1.5 sm:mr-2" />
<Input <Input
type="text" type="text"
placeholder="Search ebooks, folders, and uploads" placeholder="Search ebooks, folders, and uploads"
className="bg-transparent text-[#6B7280] text-base w-[250px] focus-visible:ring-0 focus-visible:ring-offset-0 border-0 focus:border-0" className="bg-transparent text-[#6B7280] text-[11px] xs:text-xs sm:text-sm md:text-base w-full focus-visible:ring-0 focus-visible:ring-offset-0 border-0 focus:border-0"
/> />
</div> </div>
</div> </div>
<div style={{ display: 'flex', alignItems: 'center', gap: 24 }}> <div className="flex items-center gap-1 xs:gap-2 sm:gap-3 md:gap-4 lg:gap-6">
<div style={{ position: 'relative', cursor: 'pointer' }}> <div className="relative cursor-pointer">
<Bell size={22} style={{ color: '#222' }} /> <Bell size={16} className="text-[#222] xs:text-[18px] sm:text-[20px] md:text-[22px]" />
<span style={{ position: 'absolute', top: -2, right: 0, width: 9, height: 9, background: '#FF3B30', borderRadius: '50%', border: '1.5px solid white' }} /> <span className="absolute top-[-2px] right-0 w-1 h-1 xs:w-1.5 xs:h-1.5 sm:w-2 sm:h-2 bg-[#FF3B30] rounded-full border-[1.5px] border-white" />
</div> </div>
<div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}> <div className="flex items-center cursor-pointer">
<div style={{ width: 32, height: 32, borderRadius: '50%', background: '#FFD600', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, color: '#222', fontSize: 14, position: 'relative', zIndex: 1 }}> <div className="w-5 h-5 xs:w-6 xs:h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 rounded-full bg-[#FFD600] flex items-center justify-center font-semibold text-[#222] text-[10px] xs:text-xs sm:text-sm relative z-10">
D D
</div> </div>
<div style={{ width: 32, height: 32, borderRadius: '50%', background: 'white', border: '1px solid #E5E7EB', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, color: '#222', cursor: 'pointer', marginLeft: -8, position: 'relative', zIndex: 0 }}> <div className="w-5 h-5 xs:w-6 xs:h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 rounded-full bg-white border border-[#E5E7EB] flex items-center justify-center text-[#222] cursor-pointer -ml-2 relative z-0">
+ +
</div> </div>
</div> </div>

24
components/custom/New_Release.tsx
View File

@ -49,17 +49,17 @@ const books = [
export default function NewRelease() { export default function NewRelease() {
return ( return (
<div className="w-full py-8"> <div className="w-full py-4 md:py-8">
<div className="container-main"> <div className="container-main">
<div className="flex items-center justify-between mb-2 px-2"> <div className="flex items-center justify-between mb-2 px-2">
<h2 className="text-[15px] font-[600] text-[#151C4F]">New Release</h2> <h2 className="text-[14px] md:text-[15px] font-[600] text-[#151C4F]">New Release</h2>
<a href="#" className="text-[#4F8CFF] text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a> <a href="#" className="text-[#4F8CFF] text-[14px] md:text-[16px] font-[400] hover:underline flex items-center gap-1">See more <ChevronRight size={16} /></a>
</div> </div>
<div className="border-b-2 border-[#D1D5DB] mb-6 w-full" /> <div className="border-b-2 border-[#D1D5DB] mb-4 md:mb-6 w-full" />
<div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6">
{books.map((book) => ( {books.map((book) => (
<div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}> <div key={book.title} className="flex flex-col w-full">
<div className="relative w-[158px] h-[235px] flex items-center justify-center"> <div className="relative w-full aspect-[2/3] flex items-center justify-center">
<Image <Image
src={book.cover} src={book.cover}
alt={book.title} alt={book.title}
@ -68,16 +68,16 @@ export default function NewRelease() {
className="transition group-hover:scale-105 duration-200" className="transition group-hover:scale-105 duration-200"
/> />
</div> </div>
<div className="px-1 pt-2 flex flex-col gap-1 w-[158px]"> <div className="px-1 pt-2 flex flex-col gap-1 w-full">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span> <span className="font-[400] text-[12px] md:text-[14px] text-[#151C4F] truncate" title={book.title}>{book.title}</span>
<Button variant="ghost" size="icon" className="ml-2"> <Button variant="ghost" size="icon" className="ml-2">
<Heart className="w-5 h-5 text-gray-400 hover:text-pink-500 transition" /> <Heart className="w-4 h-4 md:w-5 md:h-5 text-gray-400 hover:text-pink-500 transition" />
</Button> </Button>
</div> </div>
<div className="flex items-center justify-between mt-0.5"> <div className="flex items-center justify-between mt-0.5">
<span className="text-[12px] text-[#555979] font-[400] whitespace-nowrap"><span className="capitalize">{book.author}</span></span> <span className="text-[10px] md:text-[12px] text-[#555979] font-[400] truncate"><span className="capitalize">{book.author}</span></span>
<span className="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span> <span className="font-[700] text-[#151C4F] text-[12px] md:text-[14px] whitespace-nowrap">{book.price}</span>
</div> </div>
</div> </div>
</div> </div>

2
components/custom/Play_Ground.tsx
View File

@ -2,7 +2,7 @@ import Frame from "./Frame";
export default function PlayGround() { export default function PlayGround() {
return ( return (
<div className="w-full mt-24"> <div className="w-full px-4 sm:px-6 md:px-8 lg:px-12 mt-12 sm:mt-16 md:mt-20 lg:mt-24">
<Frame /> <Frame />
</div> </div>
); );

58
components/custom/Recent_Design.tsx
View File

@ -2,6 +2,7 @@ import Image from "next/image";
import { ExternalLink, Ellipsis, Trash2 } from 'lucide-react'; import { ExternalLink, Ellipsis, Trash2 } from 'lucide-react';
import Link from "next/link"; import Link from "next/link";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import React from "react";
// Sample data for recent designs // Sample data for recent designs
const recentDesigns = [ const recentDesigns = [
@ -31,56 +32,58 @@ const recentDesigns = [
* RecentDesign Component * RecentDesign Component
* Displays a sidebar with recent designs and a trash section * Displays a sidebar with recent designs and a trash section
*/ */
export default function RecentDesign() { export default function RecentDesign({ drawerOpen }: { drawerOpen?: boolean, setDrawerOpen?: (open: boolean) => void }) {
// Mobile drawer styles
const mobileDrawer = drawerOpen !== undefined;
return ( return (
<div className="bg-white border-t md:border-t-0 md:border-r border-[#D9D7D7] w-full md:w-[300px] flex flex-col h-auto md:h-screen justify-between p-4 md:px-4 md:pt-6 md:pb-4"> <div
{/* Logo and Title Section */} className={
<div> mobileDrawer
<div className="flex flex-col items-center mb-6 md:mb-12"> ? `fixed top-0 left-0 h-full w-[85vw] max-w-xs bg-white border-r border-[#D9D7D7] z-40 transform transition-transform duration-300 ease-in-out flex flex-col justify-between md:transform-none md:w-[300px] md:max-w-none md:h-screen md:border-t-0 md:border-r md:relative md:translate-x-0 ${drawerOpen ? 'translate-x-0' : '-translate-x-full'}`
: 'bg-white border-t md:border-t-0 md:border-r border-[#D9D7D7] w-full md:w-[300px] flex flex-col h-auto md:h-screen justify-between p-4 md:px-4 md:pt-6 md:pb-4'
}
style={mobileDrawer ? { padding: 16, paddingTop: 24 } : {}}
>
<div className="mt-[52px] md:mt-0">
<div className="flex flex-col items-center mb-4 sm:mb-6 md:mb-12">
<Image <Image
src="/logo.png" src="/logo.png"
alt="Wodey logo" alt="Wodey logo"
width={157} width={157}
height={53} height={53}
className="w-[120px] md:w-[157px] h-auto md:h-[53px]" className="w-[100px] sm:w-[120px] md:w-[157px] h-auto"
/> />
</div> </div>
{/* Recent Designs Header */} {/* Recent Designs Header */}
<div className="text-[#27275A] text-[12px] font-[400] mb-2 pl-1">Recent designs</div> <div className="text-[#27275A] text-[12px] sm:text-[14px] font-[400] mb-2 pl-1">Recent designs</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:flex md:flex-col gap-2">
<div className="grid grid-cols-2 md:flex md:flex-col gap-2">
{recentDesigns.map((design, idx) => ( {recentDesigns.map((design, idx) => (
<div <div
key={idx} key={idx}
className="flex items-center bg-white rounded-lg py-2 px-2 hover:bg-[#F5F6FA] group transition cursor-pointer" className="flex items-center bg-white rounded-lg py-2 px-2 hover:bg-[#F5F6FA] group transition cursor-pointer"
> >
<div className="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 flex items-center justify-center mr-2">
<div className="w-6 h-6 md:w-8 md:h-8 flex items-center justify-center mr-2">
<Image <Image
src={design.icon} src={design.icon}
alt="icon" alt="icon"
width={28} width={28}
height={28} height={28}
className="w-5 h-5 md:w-7 md:h-7" className="w-5 h-5 sm:w-6 sm:h-6 md:w-7 md:h-7"
/> />
</div> </div>
{/* Design Title */} {/* Design Title */}
<span className="flex-1 text-[10px] text-[#27275A] truncate max-w-[100px] md:max-w-[120px] font-[400]"> <span className="flex-1 text-[10px] sm:text-[12px] text-[#27275A] truncate max-w-[120px] sm:max-w-[140px] md:max-w-[160px] font-[400]">
{design.title} {design.title}
</span> </span>
{/* Action Buttons */} {/* Action Buttons */}
<div className="ml-auto"> <div className="ml-auto">
<Button variant="ghost" size="icon" className="h-10 w-10 p-1"> <Button variant="ghost" size="icon" className="h-8 sm:h-9 md:h-10 w-8 sm:w-9 md:w-10 p-1">
<div className="flex items-center gap-0.5 md:gap-1 pr-5"> <div className="flex items-center gap-0.5 sm:gap-1 md:gap-1.5 pr-2 sm:pr-3 md:pr-5">
<Button variant="ghost" size="icon" className="h-7 w-7 md:h-8 md:w-8 p-0 hover:bg-[#e6e6e8]"> <Button variant="ghost" size="icon" className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8 p-0 hover:bg-[#e6e6e8]">
<ExternalLink className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[4px] p-1 w-7 h-7 md:w-8 md:h-8" /> <ExternalLink className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[4px] p-1 w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8" />
</Button> </Button>
<Button variant="ghost" size="icon" className="h-7 w-7 md:h-8 md:w-8 p-0 hover:bg-[#e6e6e8]"> <Button variant="ghost" size="icon" className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8 p-0 hover:bg-[#e6e6e8]">
<Ellipsis className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[4px] p-1 w-7 h-7 md:w-8 md:h-8" /> <Ellipsis className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[4px] p-1 w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8" />
</Button> </Button>
</div> </div>
</Button> </Button>
@ -89,12 +92,11 @@ export default function RecentDesign() {
))} ))}
</div> </div>
</div> </div>
{/* Trash Section pinned to the very bottom */}
{/* Trash Section */} <Button variant="ghost" className="flex items-center gap-2 p-2 hover:bg-[#F5F6FA] rounded-lg w-full justify-start mb-2">
<Button variant="ghost" className="flex items-center gap-2 p-2 hover:bg-[#F5F6FA] rounded-lg mt-4 md:mt-0 w-full justify-start">
<Link href="/creator/trash" className="flex items-center gap-2"> <Link href="/creator/trash" className="flex items-center gap-2">
<Trash2 className="text-[#27275A] w-[16px] md:w-[20px]" /> <Trash2 className="text-[#27275A] w-[14px] sm:w-[16px] md:w-[20px]" />
<span className="text-[#27275A] text-[12px] md:text-[14px] font-[400]">Trash</span> <span className="text-[#27275A] text-[12px] sm:text-[13px] md:text-[14px] font-[400]">Trash</span>
</Link> </Link>
</Button> </Button>
</div> </div>

21
components/custom/Side_Nav.tsx
View File

@ -1,14 +1,25 @@
'use client'
import Sidebar from "./Side_bar"; import Sidebar from "./Side_bar";
import RecentDesign from "./Recent_Design"; import RecentDesign from "./Recent_Design";
export default function SideNav() { export default function SideNav({ drawerOpen, setDrawerOpen }: { drawerOpen: boolean, setDrawerOpen: (open: boolean) => void }) {
return ( return (
<div className="flex h-screen"> <div className="flex flex-col md:flex-row h-auto md:h-screen w-full relative">
<div className="h-full"> {/* Backdrop for mobile drawer */}
{drawerOpen && (
<div
className="fixed inset-0 bg-black bg-opacity-40 z-30 md:hidden"
onClick={() => setDrawerOpen(false)}
aria-label="Close recent designs menu"
/>
)}
<div className="w-full md:w-auto h-[60px] md:h-full">
<Sidebar /> <Sidebar />
</div> </div>
<div className="h-full"> {/* Drawer for mobile, always visible on desktop */}
<RecentDesign /> <div className="w-full h-auto md:h-full">
<RecentDesign drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
</div> </div>
</div> </div>
); );

57
components/custom/Side_bar.tsx
View File

@ -26,30 +26,66 @@ export default function Sidebar() {
const [isMenuOpen, setIsMenuOpen] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false);
return ( return (
<div className={`bg-[#050616] w-full md:w-[80px] h-auto md:h-screen transition-all duration-300 ease-in-out ${isMenuOpen ? 'md:w-[200px]' : ''}`}> <div className={`fixed md:relative bg-[#050616] w-full md:w-[80px] h-[60px] md:h-screen bottom-0 left-0 right-0 md:top-0 transition-all duration-300 ease-in-out z-20 ${isMenuOpen ? 'md:w-[200px]' : ''}`}>
<div className="flex md:flex-col items-center justify-center gap-4 p-4 md:pt-10"> {/* Mobile Menu */}
{/* Menu Icon */} <div className="md:hidden flex items-center justify-between px-4 h-full">
<div className="flex md:flex-col items-center gap-4 md:gap-6"> <Button
variant="ghost"
size="icon"
className="hover:bg-transparent"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
<Menu className="h-6 w-6 text-white" />
</Button>
{/* Mobile Navigation Links: show only first two, centered */}
<div className="flex flex-1 items-center justify-center gap-8">
{links.slice(0, 2).map((link) => (
<Button
key={link.path}
variant="ghost"
size="icon"
className={`flex flex-col items-center justify-center flex-1 p-2 rounded-lg transition-colors duration-200 ${
pathname === link.path ? 'bg-[#1a1c2b]' : 'hover:bg-transparent'
}`}
>
<Image
src={link.icon}
alt={link.label}
width={24}
height={24}
className="hover:opacity-80 transition-opacity duration-200 mb-1"
priority={link.path === "/"}
/>
<span className="text-white text-xs">{link.label}</span>
</Button>
))}
</div>
</div>
{/* Desktop Menu */}
<div className="hidden md:flex flex-col items-center justify-center gap-4 p-4 md:pt-10">
<div className="flex flex-col items-center gap-4 md:gap-6">
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="mb-5 hover:bg-[#1a1c2b]/50" className="mb-5 hover:bg-transparent"
onClick={() => setIsMenuOpen(!isMenuOpen)} onClick={() => setIsMenuOpen(!isMenuOpen)}
> >
<Menu className="h-6 w-6 text-white" /> <Menu className="h-6 w-6 text-white" />
</Button> </Button>
{/* Navigation Links */} {/* Desktop Navigation Links */}
{links.map((link) => ( {links.map((link) => (
<div <div
key={link.path} key={link.path}
className={`flex flex-col items-center cursor-pointer group`} className="flex flex-col items-center cursor-pointer group"
> >
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className={`p-2 rounded-lg transition-colors duration-200 ${ className={`p-2 rounded-lg transition-colors duration-200 ${
pathname === link.path ? 'bg-[#1a1c2b]' : 'group-hover:bg-[#1a1c2b]/50' pathname === link.path ? 'bg-[#1a1c2b]' : 'group-hover:bg-transparent'
}`} }`}
> >
<Image <Image
@ -58,14 +94,13 @@ export default function Sidebar() {
width={24} width={24}
height={24} height={24}
className="group-hover:opacity-80 transition-opacity duration-200" className="group-hover:opacity-80 transition-opacity duration-200"
priority={link.path === "/"} // Prioritize loading home icon priority={link.path === "/"}
/> />
</Button> </Button>
{/* Link Label */}
<p className={`text-white text-xs mt-1 transition-all duration-300 ease-in-out ${ <p className={`text-white text-xs mt-1 transition-all duration-300 ease-in-out ${
isMenuOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-4' isMenuOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-4'
} group-hover:opacity-80`}> } group-hover:opacity-80 hidden md:block`}>
{link.label} {link.label}
</p> </p>
</div> </div>

87
components/custom/marketplace_Navbar.tsx
View File

@ -1,20 +1,34 @@
'use client';
import Image from 'next/image'; import Image from 'next/image';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Bell, Heart, ShoppingCart, SquarePen } from 'lucide-react'; import { Bell, Heart, ShoppingCart, SquarePen, Menu } from 'lucide-react';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'; import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { useState } from 'react';
function MarketplaceNavbar() { function MarketplaceNavbar() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
return ( return (
<nav className="w-full bg-[#010313]"> <nav className="w-full bg-[#010313]">
<div className="container-main h-[56px] flex items-center justify-between"> <div className="container-main h-[56px] flex items-center justify-between px-4 md:px-6">
{/* Logo and Brand */} {/* Logo and Brand */}
<div className="flex items-center gap-2 min-w-[180px]"> <div className="flex items-center gap-2 min-w-[120px] md:min-w-[180px]">
<Image src="/marketplacelogo.png" alt="Woedii Logo" width={40} height={40} className="object-contain" /> <Image src="/marketplacelogo.png" alt="Woedii Logo" width={40} height={40} className="object-contain" />
<span className="text-white text-2xl ml-1 font-normal">Wodey</span> <span className="text-white text-xl md:text-2xl ml-1 font-normal">Wodey</span>
</div> </div>
{/* Search Bar */}
<div className="flex-1 flex justify-center"> {/* Mobile Menu Button */}
<button
className="md:hidden text-white"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
<Menu size={24} />
</button>
{/* Search Bar - Hidden on mobile */}
<div className="hidden md:flex flex-1 justify-center">
<div className="flex items-center bg-[#F2F4F8] rounded-[8px] px-4" style={{ width: 400, height: 40, gap: 8 }}> <div className="flex items-center bg-[#F2F4F8] rounded-[8px] px-4" style={{ width: 400, height: 40, gap: 8 }}>
<svg className="text-[#6B7280] mr-2" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8.5" cy="8.5" r="5.75"/><path d="M16 16l-3.5-3.5"/></svg> <svg className="text-[#6B7280] mr-2" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8.5" cy="8.5" r="5.75"/><path d="M16 16l-3.5-3.5"/></svg>
<Input <Input
@ -25,8 +39,9 @@ function MarketplaceNavbar() {
/> />
</div> </div>
</div> </div>
{/* Right Side Icons and Profile */}
<div className="flex items-center gap-8 min-w-[420px] justify-end"> {/* Right Side Icons and Profile - Hidden on mobile */}
<div className="hidden md:flex items-center gap-4 lg:gap-8 min-w-[320px] lg:min-w-[420px] justify-end">
{/* Notifications */} {/* Notifications */}
<div className="relative cursor-pointer flex flex-col items-center justify-center"> <div className="relative cursor-pointer flex flex-col items-center justify-center">
<div className="relative flex items-center justify-center"> <div className="relative flex items-center justify-center">
@ -57,12 +72,56 @@ function MarketplaceNavbar() {
</div> </div>
{/* Create Button */} {/* Create Button */}
<a href="/creator"> <a href="/creator">
<Button className="flex items-center gap-2 bg-[#0093A5] text-white px-5 py-2 rounded-lg font-medium text-base transition-colors ml-4 hover:bg-[#007a87] cursor-pointer" type="button"> <Button className="flex items-center gap-2 bg-[#0093A5] text-white px-3 md:px-5 py-2 rounded-lg font-medium text-sm md:text-base transition-colors ml-2 md:ml-4 hover:bg-[#007a87] cursor-pointer" type="button">
<SquarePen size={18} /> <SquarePen size={18} />
Create <span className="hidden sm:inline">Create</span>
</Button> </Button>
</a> </a>
</div> </div>
{/* Mobile Menu */}
<div className={`absolute top-[56px] left-0 right-0 bg-[#010313] z-50 md:hidden transition-all duration-300 ease-in-out transform ${isMenuOpen ? 'translate-y-0 opacity-100' : '-translate-y-4 opacity-0 pointer-events-none'}`}>
<div className="container-main py-4">
{/* Mobile Search */}
<div className="flex items-center bg-[#F2F4F8] rounded-[8px] px-4 mb-4" style={{ height: 40, gap: 8 }}>
<svg className="text-[#6B7280] mr-2" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8.5" cy="8.5" r="5.75"/><path d="M16 16l-3.5-3.5"/></svg>
<Input
type="text"
placeholder="Search..."
className="bg-transparent text-[#6B7280] text-base w-full border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-full"
style={{ height: 40 }}
/>
</div>
{/* Mobile Menu Items */}
<div className="flex flex-col gap-4">
<div className="flex items-center gap-3 text-white">
<Bell size={20} />
<span>Notifications</span>
</div>
<div className="flex items-center gap-3 text-white">
<Heart size={20} />
<span>Favorites</span>
</div>
<div className="flex items-center gap-3 text-white">
<ShoppingCart size={20} />
<span>Cart</span>
</div>
<div className="flex items-center gap-3 text-white">
<Avatar className="w-6 h-6">
<AvatarImage src="/avatar.png" alt="Profile" />
<AvatarFallback>U</AvatarFallback>
</Avatar>
<span>My Profile</span>
</div>
<a href="/creator" className="w-full">
<Button className="w-full flex items-center justify-center gap-2 bg-[#0093A5] text-white py-2 rounded-lg font-medium text-base transition-colors hover:bg-[#007a87]">
<SquarePen size={18} />
Create
</Button>
</a>
</div>
</div>
</div>
</div> </div>
</nav> </nav>
); );
@ -71,8 +130,8 @@ function MarketplaceNavbar() {
function MarketplaceSecondaryMenu() { function MarketplaceSecondaryMenu() {
return ( return (
<div className="w-full bg-[#010313] border-t border-white/20"> <div className="w-full bg-[#010313] border-t border-white/20">
<div className="container-main flex items-center h-7 p-5"> <div className="container-main flex items-center h-7 p-5 overflow-x-auto">
<ul className="flex gap-10 text-white text-sm font-normal"> <ul className="flex gap-4 md:gap-10 text-white text-sm font-normal whitespace-nowrap">
<li className="cursor-pointer">Images</li> <li className="cursor-pointer">Images</li>
<li className="cursor-pointer">Videos</li> <li className="cursor-pointer">Videos</li>
<li className="cursor-pointer">Audios</li> <li className="cursor-pointer">Audios</li>