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

Refactor layout and styling for consistency; update metadata and enhance component structures with container classes. #1

Merged
Yussif merged 1 commits from hot-fix/banner_title into main 2025-04-28 16:01:15 +00:00
Conversation 0 Commits 1 Files Changed 7 +138 -126
7 changed files with 138 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/globals.css
View File

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

4
app/layout.tsx
View File

@ -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({

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

@ -39,7 +39,7 @@ export default function QuickActions() {
<div className="relative w-full">
{/* Top linear gradient image bar */}
<div className="absolute top-0 left-0 w-full h-3 z-10">
<Image src="/GradientMesh_Light.png" alt="Gradient Bar" className="w-full h-full object-cover" />
<img src="/GradientMesh_Light.png" alt="Gradient Bar" className="w-full h-full object-cover" />
</div>
<div
className="w-full flex flex-col items-center gap-6 py-8 px-20 relative z-20"

4
components/custom/Best_Seller.tsx
View File

@ -49,7 +49,8 @@ const books = [
export default function BestSeller() {
return (
<div className="w-full py-8 px-20">
<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>
@ -83,5 +84,6 @@ export default function BestSeller() {
))}
</div>
</div>
</div>
);
}

14
components/custom/Home_Banner.tsx
View File

@ -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"

4
components/custom/New_Release.tsx
View File

@ -49,7 +49,8 @@ const books = [
export default function NewRelease() {
return (
<div className="w-full py-8 px-20">
<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>
@ -83,5 +84,6 @@ export default function NewRelease() {
))}
</div>
</div>
</div>
);
}

10
components/custom/marketplace_Navbar.tsx
View File

@ -6,11 +6,12 @@ import { Button } from '@/components/ui/button';
function MarketplaceNavbar() {
return (
<nav className="w-full h-[56px] bg-[#010313] flex items-center px-20 justify-between">
<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">Woedii</span>
<span className="text-white text-2xl ml-1 font-normal">Wodey</span>
</div>
{/* Search Bar */}
<div className="flex-1 flex justify-center">
@ -62,13 +63,15 @@ function MarketplaceNavbar() {
</Button>
</a>
</div>
</div>
</nav>
);
}
function MarketplaceSecondaryMenu() {
return (
<div className="w-full bg-[#010313] flex items-center px-20 h-7 border-t border-white/20 p-5">
<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>
@ -77,6 +80,7 @@ function MarketplaceSecondaryMenu() {
<li className="cursor-pointer">Fonts</li>
</ul>
</div>
</div>
);
}