fix: optimize website for widescreen displays (1920px-4K)

app/globals.css

@@ -339,6 +339,55 @@
     @apply bg-background text-foreground;
   }
 
+  /* Widescreen optimizations */
+  @media (min-width: 1920px) {
+    html {
+      font-size: 18px; /* Slightly larger base font size for better readability */
+    }
+
+    /* Improved spacing for wide screens */
+    .container {
+      @apply max-w-[1800px] mx-auto;
+    }
+  }
+
+  @media (min-width: 2560px) {
+    html {
+      font-size: 20px;
+    }
+
+    /* Additional spacing adjustments for 4K displays */
+    .container {
+      @apply max-w-[2000px];
+    }
+
+    /* Enhanced spacing for ultra-wide displays */
+    .section-spacing {
+      @apply py-20;
+    }
+
+    /* Improved content width for better readability */
+    .content-container {
+      @apply max-w-[1600px] mx-auto;
+    }
+
+    /* Larger paragraph spacing */
+    p {
+      @apply leading-relaxed;
+    }
+  }
+
+  /* Ultra-wide specific optimizations */
+  @media (min-width: 3440px) {
+    html {
+      font-size: 22px;
+    }
+
+    .section-spacing {
+      @apply py-24;
+    }
+  }
+
   .shiki > div > button {
     border-top-left-radius: 0 !important;
     border-bottom-right-radius: 0 !important;

app/page.tsx

@@ -5,7 +5,7 @@ import { OpensourceSection } from "@/components/sections/opensource";
 
 export default function Home() {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col space-y-12 md:space-y-16 lg:space-y-24 2xl:space-y-32">
       <HeroSection />
       <FeaturesSection />
       <OpensourceSection/>

components/common/app-layout.tsx

@@ -7,8 +7,9 @@ interface AppLayoutProps {
 
 export function AppLayout({ children }: AppLayoutProps) {
   return (
-    <div className="relative flex min-h-screen w-full flex-col">
-      {/* Sticky Banner */}
+    <div className="relative min-h-screen w-full">
+      <OriginBannerCustomizable className="bg-gradient-to-b from-blue-500 to-blue-600 text-foreground" />
+       {/* Sticky Banner */}
       {/* <StickyBanner className="bg-gradient-to-b from-blue-500 to-blue-600" hideOnScroll={true}>
         <p className="flex flex-wrap gap-1 items-center justify-center px-2 sm:px-4 leading-tight text-center text-white dark:text-gray-100 drop-shadow-md">
           <picture>
@@ -37,16 +38,21 @@ export function AppLayout({ children }: AppLayoutProps) {
         </p>
       </StickyBanner> */}
       {/* <OriginBanner /> */}
-      <OriginBannerCustomizable className="bg-gradient-to-b from-blue-500 to-blue-600 text-foreground" />
       {/* Fixed Header positioned below the sticky banner */}
       <div className="sticky top-0 z-50">
-        <HelixQueHeader />
+        <div className="mx-auto max-w-[2000px] px-4 sm:px-6 lg:px-8 2xl:px-16">
+          <HelixQueHeader />
+        </div>
       </div>
 
-      {/* Main content - no top padding needed as content flows naturally */}
-      <main className="relative z-10 flex-1">
-        {children}
-      </main>
+      {/* Main content wrapper with maximum width constraint */}
+      <div className="mx-auto max-w-[2000px] px-4 sm:px-6 lg:px-8 2xl:px-16">
+        <main className="relative z-10 flex-1">
+          <div className="mx-auto max-w-[1800px]">
+            {children}
+          </div>
+        </main>
+      </div>
     </div>
   );
 }

components/sections/hero/index.tsx

@@ -14,7 +14,7 @@ export const HeroSection = () => {
   return (
     <section
       aria-label="Hero banner"
-      className="bg-background relative z-1 container mx-auto w-full overflow-hidden px-6 lg:px-8"
+      className="bg-background relative z-1 w-full overflow-hidden px-6 lg:px-8 xl:px-12 2xl:px-16"
     >
       <div className="mx-auto max-w-5xl py-16 sm:py-28">
         <div className="flex justify-center pb-8">