Merge pull request 'Refactor layout and styling for consistency; update metadata and enhance component structures with container classes.' (#1) from hot-fix/banner_title into main

Reviewed-on: http://35.207.46.142/Wodey/woedii/pulls/1

app/globals.css

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

app/layout.tsx

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Wodey",
-  description: "Generated by create next app",
+  description: "Wodey",
 };
 
 export default function RootLayout({

app/marketplace/artists/_components/Quick_Actions.tsx

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

components/custom/Best_Seller.tsx

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

components/custom/Home_Banner.tsx

@@ -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">
+          <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-[35px] font-[500] text-[#151C4F] mb-2 tracking-tight">
+            <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">
+            <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/> 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>
             <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"

components/custom/New_Release.tsx

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

components/custom/marketplace_Navbar.tsx

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