add home secton 78

dist/output.css

@@ -984,11 +984,6 @@ body:is(.dark *) {
   margin-right: auto;
 }
 
-.my-24 {
-  margin-top: 6rem;
-  margin-bottom: 6rem;
-}
-
 .mb-12 {
   margin-bottom: 3rem;
 }
@@ -1049,6 +1044,10 @@ body:is(.dark *) {
   min-height: 500px;
 }
 
+.min-h-\[600px\] {
+  min-height: 600px;
+}
+
 .min-h-\[800px\] {
   min-height: 800px;
 }
@@ -1185,12 +1184,27 @@ body:is(.dark *) {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
 
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.from-black\/20 {
+  --tw-gradient-from: rgb(0 0 0 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .from-black\/80 {
   --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.via-black\/10 {
+  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
 .via-black\/70 {
   --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
@@ -1200,6 +1214,10 @@ body:is(.dark *) {
   --tw-gradient-to: rgb(0 0 0 / 0.8) var(--tw-gradient-to-position);
 }
 
+.to-transparent {
+  --tw-gradient-to: transparent var(--tw-gradient-to-position);
+}
+
 .bg-cover {
   background-size: cover;
 }
@@ -1238,14 +1256,6 @@ body:is(.dark *) {
   padding-bottom: 2rem;
 }
 
-.pb-24 {
-  padding-bottom: 6rem;
-}
-
-.pt-24 {
-  padding-top: 6rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1293,6 +1303,12 @@ body:is(.dark *) {
   opacity: 0.95;
 }
 
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -1311,10 +1327,20 @@ body:is(.dark *) {
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .delay-200 {
   transition-delay: 200ms;
 }
 
+.duration-500 {
+  transition-duration: 500ms;
+}
+
 .fade-up {
   opacity: 0;
   transform: translateY(30px);
@@ -1354,6 +1380,29 @@ body:is(.dark *) {
   transform: translateX(0);
 }
 
+.connector-text {
+  margin-bottom: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  --tw-text-opacity: 1;
+  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
+}
+
+@media (min-width: 768px) {
+  .connector-text {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+.hover\:scale-105:hover {
+  --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));
+}
+
 .hover\:text-gray-300:hover {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));

src/index.html

@@ -102,7 +102,7 @@
             </section>
 
             <!-- 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');">
+            <section class="relative w-screen min-h-[800px] py-12 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>
                 
                 <!-- Desktop Layout -->
@@ -187,8 +187,53 @@
                 </div>
             </section>
 
+            <!-- Home Section 7 -->
+            <section class="lg:pt-12 relative w-screen min-h-[600px] 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_bg7.webp');">
+                <div class="absolute inset-0 bg-gradient-to-r from-black/20 via-black/10 to-transparent"></div>
+                <div class="container mx-auto px-4 relative z-10">
+                    <div class="flex flex-col items-center text-center max-w-4xl mx-auto">
+                        <p class="connector-text mt-12 mb-4">FOR CREATORS</p>
+                        <h2 class="hero-heading-2 mb-6">Your Private World<br>Organized and Alive.</h2>
+                        <a href="#" class="hero-paragraph hover:text-white transition-colors mb-12">→ <u>Learn More</u></a>
+                        <div class="w-full fade-up">
+                            <img src="../src/home/img/creators2.png" alt="Creators Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Home Section 6 -->
+            <section class="relative w-screen min-h-[600px] 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_bg6.webp');">
+                <div class="absolute inset-0 bg-gradient-to-r from-black/20 via-black/10 to-transparent"></div>
+                <div class="container mx-auto px-4 relative z-10">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+                        <div class="fade-up">
+                            <p class="connector-text">FOR CONNECTORS</p>
+                            <h2 class="hero-heading-2 text-left mb-8">Connect and Build<br>Things Together.</h2>
+                            <a href="#" class="hero-paragraph hover:text-white transition-colors">→ <u>Learn More</u></a>
+                        </div>
+                        <div class="relative fade-up delay-200">
+                            <img src="../src/home/img/chat.png" alt="Chat Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Home Section 8 -->
+            <section class="py-24 relative w-screen min-h-[600px] 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_bg8.webp');">
+                <div class="absolute inset-0 bg-black bg-opacity-30"></div>
+                <div class="container mx-auto px-4 relative z-10">
+                    <div class="flex flex-col items-center text-center max-w-3xl mx-auto">
+                        <p class="connector-text mb-4">FOR ORGANIZERS</p>
+                        <h2 class="hero-heading-2 mb-6">Lead, Plan, and Make Things Happen.</h2>
+                        <a href="#" class="hero-paragraph hover:text-white transition-colors mb-12">→ <u>Learn More</u></a>
+                        <div class="w-full fade-up">
+                            <img src="../src/home/img/circle.png" alt="Creators Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
+                        </div>
+                    </div>
+                </div>
+            </section>
 
-            <div class="container mx-auto px-4">
         </main>
 
         <div class="container mx-auto px-4">

src/input.css

@@ -188,4 +188,8 @@
     opacity: 1;
     transform: translateX(0);
   }
+
+  .connector-text {
+    @apply text-yellow-500 text-lg md:text-xl font-medium tracking-wider mb-4;
+  }
 }