add home secton 78

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;
+  }
 }