edit colors

dist/output.css

@@ -747,7 +747,7 @@ body:is(.dark *) {
   border-radius: 9999px;
   border-width: 1px;
   --tw-border-opacity: 1;
-  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
   padding-left: 1rem;
@@ -770,7 +770,7 @@ body:is(.dark *) {
   z-index: -1;
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
   opacity: 0.2;
   --tw-blur: blur(16px);
   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);
@@ -782,7 +782,7 @@ body:is(.dark *) {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  --tw-shadow-color: rgb(234 179 8 / 0.7);
+  --tw-shadow-color: rgb(107 114 128 / 0.7);
   --tw-shadow: var(--tw-shadow-colored);
 }
 
@@ -831,10 +831,10 @@ body:is(.dark *) {
 }
 
 .pill-button {
-  box-shadow: 0 0 60px rgba(234, 179, 8, 0.8),
+  box-shadow: 0 0 60px rgba(198, 198, 196, 0.8),
-                0 0 120px rgba(234, 179, 8, 0.6),
+                0 0 120px rgba(116, 116, 115, 0.6),
-                0 0 180px rgba(234, 179, 8, 0.4);
+                0 0 180px rgba(70, 69, 68, 0.4);
-  border: 2px solid rgba(234, 179, 8, 0.9);
+  border: 2px solid rgba(44, 43, 42, 0.9);
 }
 
 .circular-layout {
@@ -992,6 +992,10 @@ body:is(.dark *) {
   margin-bottom: 1rem;
 }
 
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -1028,6 +1032,10 @@ body:is(.dark *) {
   height: 1.5rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
 .h-\[600px\] {
   height: 600px;
 }
@@ -1246,6 +1254,11 @@ body:is(.dark *) {
   padding-bottom: 3rem;
 }
 
+.py-24 {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+}
+
 .py-48 {
   padding-top: 12rem;
   padding-bottom: 12rem;
@@ -1337,6 +1350,10 @@ body:is(.dark *) {
   transition-delay: 200ms;
 }
 
+.duration-1000 {
+  transition-duration: 1000ms;
+}
+
 .duration-500 {
   transition-duration: 500ms;
 }
@@ -1439,4 +1456,8 @@ body:is(.dark *) {
   .lg\:h-6 {
     height: 1.5rem;
   }
+
+  .lg\:pt-12 {
+    padding-top: 3rem;
+  }
 }

src/about.html

@@ -10,7 +10,7 @@
     <div class="container mx-auto px-4 py-8">
         <nav class="flex items-center justify-between mb-8">
             <div class="flex items-center">
-                <img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
+                <img src="assets/logos/logo_lightmode2.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
             </div>
             <ul class="flex space-x-6 text-white">
                 <li><a href="index.html" class="hover:text-gray-300">Home</a></li>

src/base.html

@@ -11,7 +11,7 @@
         <!-- START: Navigation -->
         <nav class="flex items-center justify-between mb-8">
             <div class="flex items-center">
-                <img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
+                <img src="assets/logos/logo_lightmode2.svg" alt="Logo" class="h-8 mr-4">
             </div>
             <ul class="flex space-x-6 text-white">
                 <li><a href="index.html" class="hover:text-gray-300">Home</a></li>
@@ -34,5 +34,3 @@
         </footer>
         <!-- END: Footer -->
     </div>
-</body>
-</html>

src/contact.html

@@ -10,7 +10,7 @@
     <div class="container mx-auto px-4 py-8">
         <nav class="flex items-center justify-between mb-8">
             <div class="flex items-center">
-                <img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
+                <img src="assets/logos/logo_lightmode2.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
             </div>
             <ul class="flex space-x-6 text-white">
                 <li><a href="index.html" class="hover:text-gray-300">Home</a></li>

src/features.html

@@ -10,7 +10,7 @@
     <div class="container mx-auto px-4 py-8">
         <nav class="flex items-center justify-between mb-8">
             <div class="flex items-center">
-                <img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
+                <img src="assets/logos/logo_lightmode2.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
             </div>
             <ul class="flex space-x-6 text-white">
                 <li><a href="index.html" class="hover:text-gray-300">Home</a></li>

src/index.html

@@ -17,7 +17,7 @@
     <div class="container mx-auto px-4 py-8">
         <nav class="flex items-center justify-between mb-8">
             <div class="flex items-center">
-                <img src="../src/assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
+                <img src="../src/assets/logos/logo_lightmode2.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
             </div>
             <ul class="flex space-x-6 text-white">
                 <li><a href="index.html" class="hover:text-gray-300">Home</a></li>
@@ -62,32 +62,32 @@
             <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">
+                        <div class="carousel-slide absolute inset-0 opacity-95 transition-opacity duration-1000">
-                            <img src="../src/home/img/carousell/data.webp" alt="Data" class="w-full h-[600px] object-cover">
+                            <img src="../src/home/img/carousell/own2.webp" alt="Data" class="w-full h-[600px] object-cover">
                         </div>
                         <div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
-                            <img src="../src/home/img/carousell/human.webp" alt="Human" class="w-full h-[600px] object-cover">
+                            <img src="../src/home/img/carousell/human2.webp" alt="Human" class="w-full h-[600px] object-cover">
                         </div>
                         <div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
-                            <img src="../src/home/img/carousell/one.webp" alt="One" class="w-full h-[600px] object-cover">
+                            <img src="../src/home/img/carousell/one2.webp" alt="One" class="w-full h-[600px] object-cover">
                         </div>
                         <div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
-                            <img src="../src/home/img/carousell/WEB4.webp" alt="Web4" class="w-full h-[600px] object-cover">
+                            <img src="../src/home/img/carousell/WEB42.webp" alt="Web4" class="w-full h-[600px] object-cover">
                         </div>
                     </div>
                     <div class="absolute inset-0 bg-black bg-opacity-50 z-10"></div>
                     <div class="carousel-text absolute inset-0 flex items-center justify-center z-20">
                         <div class="carousel-text-slides relative w-full">
-                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-95 transition-opacity duration-2000">
+                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-95 transition-opacity duration-1000">
                                 <h2 class="hero-heading text-center max-w-4xl px-4">Own Your Data</h2>
                             </div>
-                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-2000">
+                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-1000">
                                 <h2 class="hero-heading text-center max-w-4xl px-4">Human-centered</h2>
                             </div>
-                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-2000">
+                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-1000">
                                 <h2 class="hero-heading text-center max-w-4xl px-4">All in One</h2>
                             </div>
-                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-2000">
+                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-1000">
                                 <h2 class="hero-heading text-center max-w-4xl px-4">Built on Web4</h2>
                             </div>
                         </div>
@@ -111,28 +111,19 @@
                         <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-semibold">Circl.</span></h1>
                         </div>
-                        <!-- Top -->
-                        <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: -5%; transform: translate(50%, -50%);">
-                            <button class="pill-button" style="animation-delay: 200ms;">Circle Docs</button>
+                            <button class="pill-button" style="animation-delay: 200ms;">Circl Docs</button>
                         </div>
                         
                         <!-- Right -->
                         <div class="circular-button" style="top: 50%; right: -20%; transform: translate(50%, -50%);">
-                            <button class="pill-button" style="animation-delay: 400ms;">Secure VPN</button>
+                            <button class="pill-button" style="animation-delay: 400ms;">Circl Chat</button>
-                        </div>
-                        
-                        <!-- Bottom Right -->
-                        <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>
                         
                         <!-- Bottom -->
-                        <div class="circular-button" style="bottom: -10%; left: 50%; transform: translate(-50%, 50%);">
+                        <div class="circular-button" style="bottom: 10%; right: -30%; transform: translate(-50%, 50%);">
                             <button class="pill-button" style="animation-delay: 800ms;">Circl Mail</button>
                         </div>
                         
@@ -148,7 +139,7 @@
                         
                         <!-- upper left -->
                         <div class="circular-button" style="top: 10%; left: -10%; transform: translate(-50%, -50%);">
-                            <button class="pill-button" style="animation-delay: 1200ms;">Project Board</button>
+                            <button class="pill-button" style="animation-delay: 1200ms;">Video Call</button>
                         </div>
                     </div>
                 </div>
@@ -165,9 +156,6 @@
                         <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>
@@ -180,9 +168,6 @@
                         <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>

src/input.css

@@ -59,7 +59,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;
+    @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-gray-300 transition-all duration-300 before:absolute before:inset-0 before:rounded-full before:blur-lg before:bg-gray-500 before:opacity-20 before:content-[''] before:z-[-1] hover:before:opacity-40 hover:before:blur-xl hover:scale-105 hover:shadow-gray-500/70;
   }
 
   .starry-bg {
@@ -71,10 +71,10 @@
 
   .pill-button {
     @apply px-5 py-2.5 rounded-[50px] bg-black text-white font-bold relative transition-all duration-500 transform hover:scale-105 text-base;
-    box-shadow: 0 0 60px rgba(234, 179, 8, 0.8),
+    box-shadow: 0 0 60px rgba(198, 198, 196, 0.4),
-                0 0 120px rgba(234, 179, 8, 0.6),
+                0 0 120px rgba(116, 116, 115, 0.2),
-                0 0 180px rgba(234, 179, 8, 0.4);
+                0 0 180px rgba(70, 69, 68, 0.1);
-    border: 2px solid rgba(234, 179, 8, 0.9);
+    border: 2px solid rgba(152, 151, 149, 0.9);
   }
 
   .circular-layout {