Enhance layout and styling across components; add container class for consistent spacing and update metadata for branding
This commit is contained in:
iamkiddy
parent
c8144b9d36
commit
bbcf576bb2
@ -294,3 +294,7 @@
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container-main {
|
||||
@apply w-full max-w-[1440px] mx-auto px-4 sm:px-6 md:px-8 lg:px-20;
|
||||
}
|
||||
|
||||
@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Wodey",
|
||||
description: "Wodey",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
@ -49,38 +49,40 @@ const books = [
|
||||
|
||||
export default function BestSeller() {
|
||||
return (
|
||||
<div className="w-full py-8 px-20">
|
||||
<div className="flex items-center justify-between mb-2 px-2">
|
||||
<h2 className="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>
|
||||
</div>
|
||||
<div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
|
||||
<div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
|
||||
{books.map((book) => (
|
||||
<div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
|
||||
<div className="relative w-[158px] h-[235px] flex items-center justify-center">
|
||||
<Image
|
||||
src={book.cover}
|
||||
alt={book.title}
|
||||
fill
|
||||
style={{ objectFit: 'cover', borderRadius: 4 }}
|
||||
className="transition group-hover:scale-105 duration-200"
|
||||
/>
|
||||
</div>
|
||||
<div className="px-1 pt-2 flex flex-col gap-1 w-[158px]">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span>
|
||||
<Button variant="ghost" size="icon" className="ml-2">
|
||||
<Heart className="w-5 h-5 text-gray-400 hover:text-pink-500 transition" />
|
||||
</Button>
|
||||
<div className="w-full py-8">
|
||||
<div className="container-main">
|
||||
<div className="flex items-center justify-between mb-2 px-2">
|
||||
<h2 className="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>
|
||||
</div>
|
||||
<div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
|
||||
<div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
|
||||
{books.map((book) => (
|
||||
<div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
|
||||
<div className="relative w-[158px] h-[235px] flex items-center justify-center">
|
||||
<Image
|
||||
src={book.cover}
|
||||
alt={book.title}
|
||||
fill
|
||||
style={{ objectFit: 'cover', borderRadius: 4 }}
|
||||
className="transition group-hover:scale-105 duration-200"
|
||||
/>
|
||||
</div>
|
||||
<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="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
|
||||
<div className="px-1 pt-2 flex flex-col gap-1 w-[158px]">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span>
|
||||
<Button variant="ghost" size="icon" className="ml-2">
|
||||
<Heart className="w-5 h-5 text-gray-400 hover:text-pink-500 transition" />
|
||||
</Button>
|
||||
</div>
|
||||
<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="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -4,18 +4,18 @@ import Image from "next/image";
|
||||
export default function HomeBanner() {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="max-w-[1440px] mx-auto px-20 mt-10">
|
||||
<div className="container-main 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">
|
||||
{/* Left: Text Content */}
|
||||
<div className="z-10 py-8 flex-1 flex flex-col justify-center pl-16 pr-20">
|
||||
<h1 className="text-[35px] font-[500] text-[#151C4F] mb-2 tracking-tight">
|
||||
<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">
|
||||
<h1 className="text-[28px] sm:text-[32px] md:text-[35px] font-[500] text-[#151C4F] mb-2 tracking-tight">
|
||||
1000 BLACK UMBRELLAS
|
||||
</h1>
|
||||
<p className="text-[#151C4F] text-[21px] font-[400] mb-2 max-w-5xl">
|
||||
Poems of absolute nakedness that chase the power of love. Daniel McGinn is<br/> one of the most admired poets in the underground American poetry scene.
|
||||
<p className="text-[#151C4F] text-[16px] sm:text-[18px] md: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.
|
||||
</p>
|
||||
<Button
|
||||
className="bg-transparent border border-[#151C4F] text-[#151C4F] text-[21px] w-fit px-6 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-[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"
|
||||
size="lg"
|
||||
>
|
||||
PURCHASE EBOOK
|
||||
@ -23,7 +23,7 @@ export default function HomeBanner() {
|
||||
</div>
|
||||
|
||||
{/* Right: Book Cover */}
|
||||
<div className="hidden md:block absolute" style={{ top: '85.44px', left: '986px' }}>
|
||||
<div className="hidden md:block absolute" style={{ top: '85.44px', right: '20px' }}>
|
||||
<Image
|
||||
src="/book.png"
|
||||
alt="1000 Black Umbrellas Book Cover"
|
||||
|
||||
@ -49,38 +49,40 @@ const books = [
|
||||
|
||||
export default function NewRelease() {
|
||||
return (
|
||||
<div className="w-full py-8 px-20">
|
||||
<div className="flex items-center justify-between mb-2 px-2">
|
||||
<h2 className="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>
|
||||
</div>
|
||||
<div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
|
||||
<div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
|
||||
{books.map((book) => (
|
||||
<div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
|
||||
<div className="relative w-[158px] h-[235px] flex items-center justify-center">
|
||||
<Image
|
||||
src={book.cover}
|
||||
alt={book.title}
|
||||
fill
|
||||
style={{ objectFit: 'cover', borderRadius: 4 }}
|
||||
className="transition group-hover:scale-105 duration-200"
|
||||
/>
|
||||
</div>
|
||||
<div className="px-1 pt-2 flex flex-col gap-1 w-[158px]">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span>
|
||||
<Button variant="ghost" size="icon" className="ml-2">
|
||||
<Heart className="w-5 h-5 text-gray-400 hover:text-pink-500 transition" />
|
||||
</Button>
|
||||
<div className="w-full py-8">
|
||||
<div className="container-main">
|
||||
<div className="flex items-center justify-between mb-2 px-2">
|
||||
<h2 className="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>
|
||||
</div>
|
||||
<div className="border-b-2 border-[#D1D5DB] mb-6 w-full" />
|
||||
<div className="flex gap-6 overflow-x-auto scrollbar-hide pb-2">
|
||||
{books.map((book) => (
|
||||
<div key={book.title} className="flex flex-col" style={{ minWidth: 158 }}>
|
||||
<div className="relative w-[158px] h-[235px] flex items-center justify-center">
|
||||
<Image
|
||||
src={book.cover}
|
||||
alt={book.title}
|
||||
fill
|
||||
style={{ objectFit: 'cover', borderRadius: 4 }}
|
||||
className="transition group-hover:scale-105 duration-200"
|
||||
/>
|
||||
</div>
|
||||
<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="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
|
||||
<div className="px-1 pt-2 flex flex-col gap-1 w-[158px]">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-[400] text-[14px] text-[#151C4F]" title={book.title}>{book.title}</span>
|
||||
<Button variant="ghost" size="icon" className="ml-2">
|
||||
<Heart className="w-5 h-5 text-gray-400 hover:text-pink-500 transition" />
|
||||
</Button>
|
||||
</div>
|
||||
<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="font-[700] text-[#151C4F] text-[14px] whitespace-nowrap">{book.price}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -6,61 +6,63 @@ import { Button } from '@/components/ui/button';
|
||||
|
||||
function MarketplaceNavbar() {
|
||||
return (
|
||||
<nav className="w-full h-[56px] bg-[#010313] flex items-center px-20 justify-between">
|
||||
{/* Logo and Brand */}
|
||||
<div className="flex items-center gap-2 min-w-[180px]">
|
||||
<Image src="/marketplacelogo.png" alt="Woedii Logo" width={40} height={40} className="object-contain" />
|
||||
<span className="text-white text-2xl ml-1 font-normal">Woedii</span>
|
||||
</div>
|
||||
{/* Search Bar */}
|
||||
<div className="flex-1 flex justify-center">
|
||||
<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>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search images, videos, fonts, graphics and more"
|
||||
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 }}
|
||||
/>
|
||||
<nav className="w-full bg-[#010313]">
|
||||
<div className="container-main h-[56px] flex items-center justify-between">
|
||||
{/* Logo and Brand */}
|
||||
<div className="flex items-center gap-2 min-w-[180px]">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right Side Icons and Profile */}
|
||||
<div className="flex items-center gap-8 min-w-[420px] justify-end">
|
||||
{/* Notifications */}
|
||||
<div className="relative cursor-pointer flex flex-col items-center justify-center">
|
||||
<div className="relative flex items-center justify-center">
|
||||
<Bell size={22} className="text-white" />
|
||||
<span className="absolute -top-1 -right-1 w-[9px] h-[9px] bg-[#FF3B30] rounded-full border-[1.5px] border-[#020316]" />
|
||||
{/* Search Bar */}
|
||||
<div className="flex-1 flex justify-center">
|
||||
<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>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search images, videos, fonts, graphics and more"
|
||||
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>
|
||||
<span className="text-xs text-white mt-1">Notifications</span>
|
||||
</div>
|
||||
{/* Favorites */}
|
||||
<div className="cursor-pointer flex flex-col items-center justify-center">
|
||||
<Heart size={22} className="text-white" />
|
||||
<span className="text-xs text-white mt-1">Favorites</span>
|
||||
</div>
|
||||
{/* Cart */}
|
||||
<div className="cursor-pointer flex flex-col items-center justify-center">
|
||||
<ShoppingCart size={22} className="text-white" />
|
||||
<span className="text-xs text-white mt-1">Cart</span>
|
||||
</div>
|
||||
{/* Profile */}
|
||||
<div className="cursor-pointer flex flex-col items-center justify-center">
|
||||
<div className="flex items-center justify-center">
|
||||
<Avatar className="w-6 h-6">
|
||||
<AvatarImage src="/avatar.png" alt="Profile" />
|
||||
<AvatarFallback>U</AvatarFallback>
|
||||
</Avatar>
|
||||
{/* Right Side Icons and Profile */}
|
||||
<div className="flex items-center gap-8 min-w-[420px] justify-end">
|
||||
{/* Notifications */}
|
||||
<div className="relative cursor-pointer flex flex-col items-center justify-center">
|
||||
<div className="relative flex items-center justify-center">
|
||||
<Bell size={22} className="text-white" />
|
||||
<span className="absolute -top-1 -right-1 w-[9px] h-[9px] bg-[#FF3B30] rounded-full border-[1.5px] border-[#020316]" />
|
||||
</div>
|
||||
<span className="text-xs text-white mt-1">Notifications</span>
|
||||
</div>
|
||||
<span className="text-xs text-white mt-1">My Profile</span>
|
||||
{/* Favorites */}
|
||||
<div className="cursor-pointer flex flex-col items-center justify-center">
|
||||
<Heart size={22} className="text-white" />
|
||||
<span className="text-xs text-white mt-1">Favorites</span>
|
||||
</div>
|
||||
{/* Cart */}
|
||||
<div className="cursor-pointer flex flex-col items-center justify-center">
|
||||
<ShoppingCart size={22} className="text-white" />
|
||||
<span className="text-xs text-white mt-1">Cart</span>
|
||||
</div>
|
||||
{/* Profile */}
|
||||
<div className="cursor-pointer flex flex-col items-center justify-center">
|
||||
<div className="flex items-center justify-center">
|
||||
<Avatar className="w-6 h-6">
|
||||
<AvatarImage src="/avatar.png" alt="Profile" />
|
||||
<AvatarFallback>U</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
<span className="text-xs text-white mt-1">My Profile</span>
|
||||
</div>
|
||||
{/* Create Button */}
|
||||
<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">
|
||||
<SquarePen size={18} />
|
||||
Create
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
{/* Create Button */}
|
||||
<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">
|
||||
<SquarePen size={18} />
|
||||
Create
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
@ -68,14 +70,16 @@ function MarketplaceNavbar() {
|
||||
|
||||
function MarketplaceSecondaryMenu() {
|
||||
return (
|
||||
<div className="w-full bg-[#010313] flex items-center px-20 h-7 border-t border-white/20 p-5">
|
||||
<ul className="flex gap-10 text-white text-sm font-normal">
|
||||
<li className="cursor-pointer">Images</li>
|
||||
<li className="cursor-pointer">Videos</li>
|
||||
<li className="cursor-pointer">Audios</li>
|
||||
<li className="cursor-pointer">Gifs</li>
|
||||
<li className="cursor-pointer">Fonts</li>
|
||||
</ul>
|
||||
<div className="w-full bg-[#010313] border-t border-white/20">
|
||||
<div className="container-main flex items-center h-7 p-5">
|
||||
<ul className="flex gap-10 text-white text-sm font-normal">
|
||||
<li className="cursor-pointer">Images</li>
|
||||
<li className="cursor-pointer">Videos</li>
|
||||
<li className="cursor-pointer">Audios</li>
|
||||
<li className="cursor-pointer">Gifs</li>
|
||||
<li className="cursor-pointer">Fonts</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue
Block a user