edit home section 5

dist/output.css

@@ -841,14 +841,14 @@ body:is(.dark *) {
   position: relative;
   margin-left: auto;
   margin-right: auto;
-  height: 400px;
+  height: 500px;
-  width: 400px;
+  width: 500px;
 }
 
 @media (min-width: 768px) {
   .circular-layout {
-    height: 500px;
+    height: 600px;
-    width: 500px;
+    width: 600px;
   }
 }
 
@@ -872,6 +872,55 @@ body:is(.dark *) {
   transform: translate(50%, 50%);
 }
 
+@media (max-width: 767px) {
+  .bg-black\/80 {
+    background-image: none;
+  }
+
+  .circular-layout {
+    display: flex;
+    height: auto;
+    width: 100%;
+    max-width: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .title-container {
+    position: relative;
+    top: 0px;
+    margin-bottom: 1.25rem;
+  }
+
+  .pill-button-container {
+    margin-bottom: 1rem;
+    width: 100%;
+    max-width: 350px;
+  }
+
+  .pill-button {
+    width: 100%;
+    border-radius: 50px;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    text-align: center;
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  body, html {
+    overflow-x: hidden;
+  }
+
+  section {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+}
+
 .absolute {
   position: absolute;
 }
@@ -925,6 +974,11 @@ body:is(.dark *) {
   margin-right: -50vw;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -967,6 +1021,10 @@ body:is(.dark *) {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 .h-3 {
   height: 0.75rem;
 }
@@ -1027,6 +1085,10 @@ body:is(.dark *) {
   max-width: 28rem;
 }
 
+.max-w-sm {
+  max-width: 24rem;
+}
+
 .max-w-xl {
   max-width: 36rem;
 }
@@ -1079,6 +1141,12 @@ body:is(.dark *) {
   margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1150,37 +1218,24 @@ body:is(.dark *) {
   padding-right: 1rem;
 }
 
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .py-12 {
   padding-top: 3rem;
   padding-bottom: 3rem;
 }
 
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
-.py-24 {
-  padding-top: 6rem;
-  padding-bottom: 6rem;
-}
-
-.py-32 {
-  padding-top: 8rem;
-  padding-bottom: 8rem;
-}
-
 .py-48 {
   padding-top: 12rem;
   padding-bottom: 12rem;
 }
 
-.pb-12 {
+.py-8 {
-  padding-bottom: 3rem;
+  padding-top: 2rem;
-}
+  padding-bottom: 2rem;
-
-.pt-12 {
-  padding-top: 3rem;
 }
 
 .pb-24 {
@@ -1310,6 +1365,14 @@ body:is(.dark *) {
 }
 
 @media (min-width: 768px) {
+  .md\:block {
+    display: block;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
   .md\:h-5 {
     height: 1.25rem;
   }

src/index.html

@@ -59,7 +59,7 @@
 
             </div>
             <!-- Home Section 3 -->
-            <section class="relative w-screen h-[600px] mb-12 overflow-hidden -mx-[50vw] left-[50%] right-[50%] relative">
+            <section class="relative w-screen h-[600px]  overflow-hidden -mx-[50vw] left-[50%] right-[50%] relative">
                 <div class="carousel relative w-full h-[600px]">
                     <div class="carousel-slides absolute inset-0">
                         <div class="carousel-slide absolute inset-0 opacity-95 transition-opacity duration-3000">
@@ -101,31 +101,33 @@
                 </div>
             </section>
 
-            <!-- Home Section 4 -->
+            <!-- Home Section 4 (Responsive) -->
             <section class="relative w-screen min-h-[800px] pt-24 pb-24 my-24 overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg4_1.webp');">
                 <div class="absolute inset-0 bg-gradient-to-b from-black/80 via-black/70 to-black/80"></div>
-                <div class="relative z-10 w-full py-12">
+                
+                <!-- Desktop Layout -->
+                <div class="relative z-10 w-full py-12 hidden md:block">
                     <div class="circular-layout">
                         <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
-                            <h1 class="hero-heading-2 text-center fade-up max-w-xl">Everything You Need in One <span class="font-medium">Circl.</span></h1>
+                            <h1 class="hero-heading-2 text-center fade-up max-w-xl">Everything You Need in One <span class="font-semibold">Circl.</span></h1>
                         </div>
                         <!-- Top -->
-                        <div class="circular-button" style="top: -15%; left: 50%; transform: translate(-50%, -50%);">
+                        <div class="circular-button" style="top: -10%; left: 50%; transform: translate(-50%, -50%);">
                             <button class="pill-button" style="animation-delay: 0ms;">File Drive</button>
                         </div>
                         
                         <!-- Top Right -->
-                        <div class="circular-button" style="top: 10%; right: -10%; transform: translate(50%, -50%);">
+                        <div class="circular-button" style="top: 10%; right: -5%; transform: translate(50%, -50%);">
                             <button class="pill-button" style="animation-delay: 200ms;">Circle Docs</button>
                         </div>
                         
                         <!-- Right -->
-                        <div class="circular-button" style="top: 50%; right: -25%; transform: translate(50%, -50%);">
+                        <div class="circular-button" style="top: 50%; right: -20%; transform: translate(50%, -50%);">
                             <button class="pill-button" style="animation-delay: 400ms;">Secure VPN</button>
                         </div>
                         
                         <!-- Bottom Right -->
-                        <div class="circular-button" style="bottom: 5%; right: -10%; transform: translate(50%, 50%);">
+                        <div class="circular-button" style="bottom: 10%; right: -10%; transform: translate(50%, 50%);">
                             <button class="pill-button" style="animation-delay: 600ms;">Video Call</button>
                         </div>
                         
@@ -135,22 +137,57 @@
                         </div>
                         
                         <!-- Bottom Left -->
-                        <div class="circular-button" style="bottom: 10%; left: -10%; transform: translate(-50%, 50%);">
+                        <div class="circular-button" style="bottom: 10%; left: -5%; transform: translate(-50%, 50%);">
                             <button class="pill-button" style="animation-delay: 1000ms;">Calendar</button>
                         </div>
                         
                         <!-- Left -->
-                        <div class="circular-button" style="top: 50%; left: -25%; transform: translate(-50%, -50%);">
+                        <div class="circular-button" style="top: 50%; left: -20%; transform: translate(-50%, -50%);">
                             <button class="pill-button" style="animation-delay: 1200ms;">AI Assistant</button>
                         </div>
+                        
                         <!-- upper left -->
-                        <div class="circular-button" style="top: 10%; left: -15%; transform: translate(-50%, -50%);">
+                        <div class="circular-button" style="top: 10%; left: -10%; transform: translate(-50%, -50%);">
                             <button class="pill-button" style="animation-delay: 1200ms;">Project Board</button>
                         </div>
                     </div>
                 </div>
+
+                <!-- Mobile Layout -->
+                <div class="relative z-10 w-full  md:hidden">
+                    <div class="text-center mb-8">
+                        <h1 class="hero-heading-2 fade-up max-w-md mx-4">Everything You Need in One <span class="font-semibold">Circl.</span></h1>
+                    </div>
+                    <div class="flex flex-col items-center space-y-4 px-6 max-w-sm mx-auto">
+                        <div class="w-full">
+                            <button class="pill-button w-full" style="animation-delay: 0ms;">File Drive</button>
+                        </div>
+                        <div class="w-full">
+                            <button class="pill-button w-full" style="animation-delay: 200ms;">Circle Docs</button>
+                        </div>
+                        <div class="w-full">
+                            <button class="pill-button w-full" style="animation-delay: 400ms;">Secure VPN</button>
+                        </div>
+                        <div class="w-full">
+                            <button class="pill-button w-full" style="animation-delay: 600ms;">Video Call</button>
+                        </div>
+                        <div class="w-full">
+                            <button class="pill-button w-full" style="animation-delay: 800ms;">Circl Mail</button>
+                        </div>
+                        <div class="w-full">
+                            <button class="pill-button w-full" style="animation-delay: 1000ms;">Calendar</button>
+                        </div>
+                        <div class="w-full">
+                            <button class="pill-button w-full" style="animation-delay: 1200ms;">AI Assistant</button>
+                        </div>
+                        <div class="w-full">
+                            <button class="pill-button w-full" style="animation-delay: 1400ms;">Project Board</button>
+                        </div>
+                    </div>
+                </div>
             </section>
 
+
             <div class="container mx-auto px-4">
         </main>
 

src/input.css

@@ -61,9 +61,7 @@
   .main-button {
     @apply relative px-4 py-2 md:px-6 md:py-3 text-white text-base md:text-lg font-medium rounded-full bg-black border border-yellow-500 transition-all duration-300 before:absolute before:inset-0 before:rounded-full before:blur-lg before:bg-yellow-500 before:opacity-20 before:content-[''] before:z-[-1] hover:before:opacity-40 hover:before:blur-xl hover:scale-105 hover:shadow-yellow-500/70;
   }
-}
 
-@layer components {
   .starry-bg {
     background-image: 
       radial-gradient(circle at center, transparent 0%, black 100%),
@@ -80,26 +78,60 @@
   }
 
   .circular-layout {
-    @apply relative w-[400px] h-[400px] md:w-[500px] md:h-[500px] mx-auto;
+    @apply relative w-[500px] h-[500px] md:w-[600px] md:h-[600px] mx-auto;
   }
 
   .circular-button {
     @apply absolute opacity-0 z-20;
     transition: opacity 0.5s ease-out, transform 0.5s ease-out;
-  }
-
-  .circular-button {
     transform: translate(-50%, -50%);
   }
+
   .circular-button[style*="right"] {
     transform: translate(50%, -50%);
   }
+
   .circular-button[style*="bottom"] {
     transform: translate(-50%, 50%);
   }
+
   .circular-button[style*="bottom"][style*="right"] {
     transform: translate(50%, 50%);
   }
+
+  .title-container {
+    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10;
+  }
+
+  @media (max-width: 767px) {
+    .bg-black\/80 {
+      @apply bg-none;
+    }
+
+    .circular-layout {
+      @apply flex flex-col justify-center items-center w-full max-w-full h-auto;
+    }
+
+    .title-container {
+      @apply relative top-0 mb-5;
+    }
+
+    .pill-button-container {
+      @apply mb-4 w-full max-w-[350px];
+    }
+
+    .pill-button {
+      @apply w-full px-6 py-3 text-center text-base rounded-[50px];
+    }
+
+    body, html {
+      @apply overflow-x-hidden;
+    }
+
+    section {
+      @apply mx-0;
+    }
+  }
 }
 
 @layer utilities {