Merge pull request #7 from glandjs/develop

fix: fix hero section responsev in mobile

Author: m-mdy-m

public/global.css

@@ -1165,11 +1165,6 @@ body {
   opacity: 0;
 }
 
-.animate-fade-in {
-  animation: fadeIn 0.8s ease-out forwards;
-  opacity: 0;
-}
-
 @keyframes float {
   0%,
     100% {
@@ -1338,6 +1333,20 @@ 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;
 }
@@ -1350,10 +1359,6 @@ body {
   position: sticky;
 }
 
-.-inset-4 {
-  inset: -1rem;
-}
-
 .inset-0 {
   inset: 0px;
 }
@@ -1817,10 +1822,6 @@ body {
   white-space: nowrap;
 }
 
-.break-words {
-  overflow-wrap: break-word;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
@@ -2059,10 +2060,6 @@ 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);
 }
@@ -2432,10 +2429,6 @@ 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);
@@ -2709,11 +2702,22 @@ 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;
@@ -2889,10 +2893,6 @@ 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,11 +2,14 @@
 export interface Props {
   lang?: string;
   filename?: string;
+  class?: string;
+  div?:string
 }
 
 const {
   lang = "javascript",
   filename = "",
+  class: className = ""
 } = Astro.props;
 
 const langColors = {
@@ -16,7 +19,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">
+<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}`}>
   <!-- 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 -->
@@ -57,9 +60,9 @@ const langColors = {
   </div>
 
   {/* Code Container */}
-  <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">
+    <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">
         <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-6 text-center md:text-left">
+    <div class="flex flex-col justify-center space-y-4 sm:space-y-6 text-center md:text-left">
       <!-- Badge -->
-      <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;">
+      <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;">
         <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-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-text-primary">
+        <h1 class="text-2xl xs: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,32 +60,22 @@ import CodeBlock from "@components/CodeBlock.astro";
     </div>
 
      <!-- Code Block Column -->
-    <div class="relative lg:flex items-center animate-fade-in" style="animation-delay: 0.9s;">
-      <div class="absolute -inset-4 bg-gradient-to-r from-primary/10 to-primary/5 rounded-xl filter blur-xl opacity-70"></div>
+    <CodeBlock
+        lang="typescript"
+        filename="app.ts"
+        class="code-block-glass"
+      >
+        {`
+          import { GlandFactory } from '@gland/core';
+          import { UserModule } from './user.module';
 
-      <div class="relative w-full rounded-xl overflow-hidden border border-border shadow-2xl">
+          // Create app instance
+          const app = GlandFactory.create(UserModule);
 
-
-        <CodeBlock
-          lang="typescript"
-          filename="app"
-        >
-          {
-            `
-        import { GlandFactory } from '@gland/core';
-        import { UserModule } from './user.module';
-
-        // Create app instance
-        const app = GlandFactory.create(UserModule);
-
-        // Start HTTP server
-        app.listen(3000, {
-          message: "Server running on http://localhost:3000"
-        });
-            `
-          }
-        </CodeBlock>
-      </div>
-    </div>
-  </div>
+          // Start HTTP server
+          app.listen(3000, {
+            message: "Server running on http://localhost:3000"
+          });
+        `}
+    </CodeBlock>
 </section>

src/styles/global.css

@@ -421,4 +421,17 @@
       color: rgb(var(--primary));
     }
   }
+  .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);
+  }
 }