feat: implement initial application layout with navigation sidebar, header, and reusable custom button component

src/components/custom/CustomButton.tsx

@@ -29,7 +29,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
 
   const variantClasses = {
     primary:
-      "bg-[#0B3B6A] text-white hover:bg-[#092e53] focus:ring-[#0B3B6A] disabled:bg-gray-300 disabled:text-gray-500",
+      "bg-gradient-to-b from-[#1B9869] to-[#14704E] text-white shadow-sm hover:shadow-md hover:from-[#188A5F] hover:to-[#126446] focus:ring-[#1B9869] disabled:from-gray-300 disabled:to-gray-300 disabled:text-gray-500 disabled:shadow-none",
     secondary:
       "bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500 disabled:bg-gray-300 disabled:text-gray-500",
     outlined:
@@ -39,9 +39,9 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   };
 
   const sizeClasses = {
-    sm: "px-3 py-1.5 text-sm gap-1.5",
-    md: "px-4 py-2 text-sm gap-2",
-    lg: "px-6 py-3 text-base gap-2",
+    sm: "px-3 py-1 text-sm gap-1.5",
+    md: "px-4 py-1.5 text-sm gap-2",
+    lg: "px-6 py-2.5 text-base gap-2",
   };
 
   const isDisabled = disabled || loading;

src/layout/AppHeader.tsx

@@ -24,8 +24,8 @@ export default function AppHeader({ onMenuClick }: AppHeaderProps) {
           <Menu size={24} strokeWidth={2} />
         </button>
         <div className="flex flex-col justify-center">
-          <h1 className="text-lg md:text-[22px] font-bold text-[#111827] tracking-tight">{meta.title}</h1>
-          <p className="hidden md:block text-[13px] font-medium text-slate-400">{meta.subtitle}</p>
+          <h1 className="text-lg md:text-[18px] font-bold text-[#111827] tracking-tight">{meta.title}</h1>
+          <p className="hidden md:block text-[12px] font-medium text-slate-400">{meta.subtitle}</p>
         </div>
       </div>
       <div className="flex items-center gap-2 md:gap-4">

src/layout/AppLayout.tsx

@@ -15,7 +15,7 @@ function Layout({ children }: LayoutProps) {
       <AppSidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
       
       {/* Main Content Area Wrapper */}
-      <div className="flex-1 flex flex-col overflow-hidden bg-white rounded-[12px] shadow-sm border border-gray-100/50 relative z-10 my-2 mr-2 ml-1">
+      <div className="flex-1 flex flex-col overflow-hidden bg-white rounded-[12px] shadow-[0px_0px_10px_rgba(0,0,0,0.05)] border border-gray-100/50 relative z-10 my-2 mr-2 ml-1">
         <AppHeader onMenuClick={() => setIsSidebarOpen(true)} />
         <main className="flex-1 overflow-y-auto px-8 py-6 bg-white rounded-b-[12px]">
           {children}

src/layout/AppSidebar.tsx

@@ -70,24 +70,8 @@ export default function AppSidebar({ isOpen, onClose }: AppSidebarProps) {
           </button>
         </div>
 
-        {/* Global Terminal */}
-        <div className={`mb-3 ${isCollapsed ? 'px-2' : 'px-4'}`}>
-          <div className={`flex items-center justify-between py-2.5 bg-gradient-to-b from-white to-[#F8FAF9] border border-gray-200/80 rounded-2xl shadow-[0_2px_8px_-4px_rgba(0,0,0,0.05)] ${isCollapsed ? 'px-0 justify-center h-[34px]' : 'px-4'}`}>
-            {!isCollapsed ? (
-              <>
-                <span className="text-[10px] font-bold text-slate-500 uppercase tracking-widest whitespace-nowrap overflow-hidden">
-                  Global Terminal
-                </span>
-                <span className="px-2 py-[2px] rounded-full border border-[#1B9869] text-[#1B9869] text-[10px] font-bold tracking-wide">
-                  Active
-                </span>
-              </>
-            ) : (
-              <div className="w-2 h-2 rounded-full bg-[#1B9869]"></div>
-            )}
-          </div>
-        </div>
-
+       
+       
         {/* Navigation */}
         <nav className={`flex-1 py-3 space-y-1 overflow-y-auto overflow-x-hidden ${isCollapsed ? 'px-3' : 'px-4'}`}>
           {NAV_ITEMS.map((item) => {
@@ -104,7 +88,7 @@ export default function AppSidebar({ isOpen, onClose }: AppSidebarProps) {
                 }}
                 className={`group flex items-center ${isCollapsed ? 'justify-center px-0 w-12 mx-auto' : 'gap-3 px-3.5'} py-[10px] rounded-[12px] text-[13px] transition-all duration-200 relative ${
                   isActive
-                    ? 'bg-gradient-to-r from-[#1B9869] to-[#14704E] text-white shadow-md shadow-[#1B9869]/20 font-semibold'
+                    ? 'bg-gradient-to-b from-[#1B9869] to-[#14704E] text-white shadow-md shadow-[#1B9869]/20 font-semibold'
                     : 'text-[#475569] font-medium hover:bg-slate-200/40 hover:text-slate-900'
                 }`}
               >