diff --git a/apps/landing/src/app/homepage/page.tsx b/apps/landing/src/app/homepage/page.tsx index 0281aa5..f359f63 100644 --- a/apps/landing/src/app/homepage/page.tsx +++ b/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( - 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) - ); + clip-path: ${generateZigzagClipPath(ZIGZAG_POINTS)}; } .shape-future-title { @@ -189,7 +207,7 @@ function HeroSection() {

{/* Email Form */} - +
Free early access. No credit card required.

- - {/* Badges */}
{badges.map((badge, i) => ( @@ -651,7 +667,15 @@ function ShapeTheFutureSection() { return (
-
+
+
+
+
+
+
+
+
+

Shape the future of Banatie

@@ -662,7 +686,7 @@ function ShapeTheFutureSection() { need.

-
+
{features.map((feature, i) => (