Merge pull request #8 from glandjs/develop

fix: fix responsev hero section

Author: m-mdy-m

public/global.css

@@ -1165,6 +1165,11 @@ body {
   opacity: 0;
 }
 
+.animate-fade-in {
+  animation: fadeIn 0.8s ease-out forwards;
+  opacity: 0;
+}
+
 @keyframes float {
   0%,
     100% {
@@ -1333,20 +1338,6 @@ body {
   }
 }
 
-.code-block-glass {
-  background: radial-gradient(
-      ellipse at 75% 25%,
-      rgba(100, 108, 255, 0.15) 0%,
-      rgba(100, 108, 255, 0.05) 45%,
-      rgba(2, 8, 23, 0.9) 100%
-    ) !important;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(100, 108, 255, 0.15);
-  box-shadow: 0 8px 32px rgba(2, 8, 23, 0.5),
-      inset 0 0 0 1px rgba(255, 255, 255, 0.05);
-}
-
 .absolute {
   position: absolute;
 }
@@ -1359,6 +1350,10 @@ body {
   position: sticky;
 }
 
+.-inset-4 {
+  inset: -1rem;
+}
+
 .inset-0 {
   inset: 0px;
 }
@@ -1822,6 +1817,10 @@ body {
   white-space: nowrap;
 }
 
+.break-words {
+  overflow-wrap: break-word;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -2060,6 +2059,10 @@ body {
   --tw-gradient-to: rgb(var(--primary) / 1) var(--tw-gradient-to-position);
 }
 
+.to-primary\/5 {
+  --tw-gradient-to: rgb(var(--primary) / 0.05) var(--tw-gradient-to-position);
+}
+
 .to-text-secondary {
   --tw-gradient-to: rgb(var(--text-secondary) / 1) var(--tw-gradient-to-position);
 }
@@ -2429,6 +2432,10 @@ body {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .backdrop-blur-lg {
   --tw-backdrop-blur: blur(16px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -2702,22 +2709,11 @@ body {
     gap: 1rem;
   }
 
-  .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
-  }
-
   .sm\:text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;
   }
 
-  .sm\:text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
   .sm\:text-xl {
     font-size: 1.25rem;
     line-height: 1.75rem;
@@ -2893,6 +2889,10 @@ body {
 }
 
 @media (min-width: 1024px) {
+  .lg\:flex {
+    display: flex;
+  }
+
   .lg\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }

src/components/CodeBlock.astro

@@ -2,14 +2,11 @@
 export interface Props {
   lang?: string;
   filename?: string;
-  class?: string;
-  div?:string
 }
 
 const {
   lang = "javascript",
   filename = "",
-  class: className = ""
 } = Astro.props;
 
 const langColors = {
@@ -19,7 +16,7 @@ const langColors = {
 };
 ---
 
-<div class={`group relative rounded-lg md:rounded-xl border border-border bg-background-secondary/50 backdrop-blur-lg shadow-lg hover:shadow-xl transition-all overflow-hidden ${className}`}>
+<div class="group relative rounded-lg md:rounded-xl border border-border bg-background-secondary/50 backdrop-blur-lg shadow-lg hover:shadow-xl transition-all overflow-hidden">
   <!-- Header -->
   <div class="flex items-center justify-between px-3 md:px-4 py-2 md:py-3 bg-background-tertiary/80 border-b border-border">
     <!-- Window Controls -->
@@ -60,9 +57,9 @@ const langColors = {
   </div>
 
   {/* Code Container */}
-    <pre class="overflow-x-auto p-3 md:p-4 text-xs md:text-sm ">
-      <code class="font-mono text-text-primary [&>.token]:animate-highlight">
+  <pre class="overflow-x-auto p-3 md:p-4 text-xs md:text-sm leading-relaxed scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border">
+    <code class="font-mono text-text-primary [&>.token]:animate-highlight break-words">
         <slot />
       </code>
-    </pre>
+   </pre>
 </div>

src/sections/HeroSection.astro

@@ -12,16 +12,16 @@ import CodeBlock from "@components/CodeBlock.astro";
 
    <div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-8 lg:gap-20 relative z-10">
     <!-- Text Content Column -->
-    <div class="flex flex-col justify-center space-y-4 sm:space-y-6 text-center md:text-left">
+    <div class="flex flex-col justify-center space-y-6 text-center md:text-left">
       <!-- Badge -->
-      <div class="group inline-flex items-center gap-2 bg-background-tertiary/80 text-xs sm:text-sm backdrop-blur-sm border border-border/60 rounded-full pl-1 pr-4 py-1 w-fit mx-auto md:mx-0 animate-fade-in-up" style="animation-delay: 0.1s;">
+      <div class="group inline-flex items-center gap-2 bg-background-tertiary/80 backdrop-blur-sm border border-border/60 rounded-full pl-1 pr-4 py-1 w-fit mx-auto md:mx-0 animate-fade-in-up" style="animation-delay: 0.1s;">
         <span class="bg-primary text-white px-2 py-0.5 rounded-full text-xs font-semibold tracking-wide">ALPHA</span>
         <span class="text-sm text-text-secondary group-hover:text-text-primary transition-colors duration-300">Now available for testing</span>
       </div>
 
        <!-- Main Heading -->
       <div class="space-y-3 md:space-y-4 animate-fade-in-up" style="animation-delay: 0.3s;">
-        <h1 class="text-2xl xs:text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-text-primary">
+        <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-text-primary">
           <span class="block text-text-primary">Scalable & Modular</span>
           <span class="bg-gradient-to-r from-[#6ea8fe] to-[#a56eff] bg-clip-text text-transparent">
             Event-Driven
@@ -60,22 +60,28 @@ import CodeBlock from "@components/CodeBlock.astro";
     </div>
 
      <!-- Code Block Column -->
-    <CodeBlock
-        lang="typescript"
-        filename="app.ts"
-        class="code-block-glass"
-      >
-        {`
-          import { GlandFactory } from '@gland/core';
-          import { UserModule } from './user.module';
+    <div class="relative lg:flex items-center animate-fade-in overflow-hidden" style="animation-delay: 0.9s;">
+      <div class="relative w-full rounded-xl overflow-hidden border border-border shadow-2xl">
+        <CodeBlock
+          lang="typescript"
+          filename="app"
+        >
+          {
+            `
+        import { GlandFactory } from '@gland/core';
+        import { UserModule } from './user.module';
 
-          // Create app instance
-          const app = GlandFactory.create(UserModule);
+        // Create app instance
+        const app = GlandFactory.create(UserModule);
 
-          // Start HTTP server
-          app.listen(3000, {
-            message: "Server running on http://localhost:3000"
-          });
-        `}
-    </CodeBlock>
+        // Start HTTP server
+        app.listen(3000, {
+          message: "Server running on http://localhost:3000"
+        });
+            `
+          }
+        </CodeBlock>
+      </div>
+    </div>
+  </div>
 </section>