feat: add styles to shape section

apps/landing/src/app/homepage/page.tsx

@@ -37,6 +37,29 @@ import {
 } from 'lucide-react';
 import GlowEffect from './_components/GlowEffect';
 
+// ============================================================================
+// UTILS
+// ============================================================================
+
+const ZIGZAG_POINTS = [
+  40, 0, 20, 10, 30, 50, 20, 15, 0, 20, 25, 50, 10, 20, 0, 15, 10, 25, 20, 50, 0, 20, 40, 20, 25,
+  10, 0, 15, 0, 20, 0, 40, 10, 0,
+];
+
+function generateZigzagClipPath(yValues: number[]): string {
+  const lastIndex = yValues.length - 1;
+  const getX = (i: number) => `${(i / lastIndex) * 100}%`;
+
+  const topEdge = yValues.map((y, i) => `${getX(i)} ${y}px`).join(', ');
+  const bottomEdge = [...yValues]
+    .map((y, i) => [getX(i), y] as const)
+    .reverse()
+    .map(([x, y]) => `${x} calc(100% - 50px + ${y}px)`)
+    .join(', ');
+
+  return `polygon(${topEdge}, ${bottomEdge})`;
+}
+
 // ============================================================================
 // STYLES (CSS-in-JS for custom styles not available in Tailwind)
 // ============================================================================
@@ -74,12 +97,7 @@ const customStyles = `
   }
 
   .shape-future {
-    clip-path: polygon(
+    clip-path: ${generateZigzagClipPath(ZIGZAG_POINTS)};
-      0% 40px, 10% 0px, 20% 40px, 30% 0px, 40% 40px, 50% 0px, 60% 40px, 70% 0px, 80% 40px, 90% 0px, 100% 40px,
-      100% calc(100% - 40px), 90% calc(100% - 0px), 80% calc(100% - 40px), 70% calc(100% - 0px),
-      60% calc(100% - 40px), 50% calc(100% - 0px), 40% calc(100% - 40px), 30% calc(100% - 0px),
-      20% calc(100% - 40px), 10% calc(100% - 0px), 0% calc(100% - 40px)
-    );
   }
 
   .shape-future-title {
@@ -213,8 +231,6 @@ function HeroSection() {
 
         <p className="text-sm text-gray-500 mb-10">Free early access. No credit card required.</p>
 
-
-
         {/* Badges */}
         <div className="flex flex-nowrap gap-5 justify-center">
           {badges.map((badge, i) => (
@@ -651,7 +667,15 @@ function ShapeTheFutureSection() {
   return (
     <div className="relative my-[60px]">
       <section className="shape-future bg-[#2a2a2a] relative z-[2]">
-        <div className="relative z-[6] py-[60px] px-10 text-center max-w-[700px] mx-auto">
+        <section className="shape-future bg-black absolute w-full h-[500px] top-[-446px] left-[2px] opacity-30 z-[2] " />
+        <div className='absolute h-[200px] w-full blur-sm'>
+          <section className="shape-future bg-black absolute  w-full h-[500px] top-[-430px] left-[2px] opacity-30 z-[2] " />
+        </div>
+        <div className='absolute h-[200px] bottom-[-50px] w-full blur-sm'>
+          <section className="shape-future bg-black absolute w-full h-[500px] bottom-[-388px] left-[2px] opacity-20 z-[2] " />
+        </div>
+        <section className="shape-future bg-white absolute w-full h-[500px] bottom-[-449px] left-[1px] opacity-30 z-[2] " />
+        <div className="relative z-[6] pt-[100px] pb-[60px] px-10 text-center max-w-[700px] mx-auto">
           <h2 className="shape-future-title text-5xl font-semibold text-[#f5f5f5] mb-4 leading-tight">
             Shape the future of Banatie
           </h2>
@@ -662,7 +686,7 @@ function ShapeTheFutureSection() {
             need.
           </p>
 
-          <div className="flex flex-wrap gap-6 justify-center text-[0.95rem] text-[#888]">
+          <div className="flex flex-wrap gap-6 justify-center text-[0.95rem] text-[#888] mb-20">
             {features.map((feature, i) => (
               <span key={i} className="flex items-center gap-2">
                 <feature.icon className="w-4 h-4" />