92 lines
3.3 KiB
TypeScript
92 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { MessageCircle, Vote, Users } from 'lucide-react';
|
|
|
|
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})`;
|
|
}
|
|
|
|
export const styles = `
|
|
.shape-future {
|
|
clip-path: ${generateZigzagClipPath(ZIGZAG_POINTS)};
|
|
}
|
|
|
|
.metal-texture {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.metal-texture::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
|
opacity: 0.5;
|
|
mix-blend-mode: multiply;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.shape-future-title {
|
|
font-family: 'Caveat', cursive;
|
|
}
|
|
`;
|
|
|
|
const features = [
|
|
{ icon: MessageCircle, text: 'Direct feedback channel' },
|
|
{ icon: Vote, text: 'Feature voting' },
|
|
{ icon: Users, text: 'Early adopter community' },
|
|
];
|
|
|
|
export function ShapeTheFutureSection() {
|
|
return (
|
|
<div className="relative my-[60px]">
|
|
<section className="shape-future metal-texture bg-[#2a2a2a] relative z-[2]">
|
|
<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>
|
|
|
|
<p className="text-[1.05rem] text-[#a0a0a0] mb-6 leading-relaxed">
|
|
We're building this for developers like you. Early adopters get direct influence on
|
|
our roadmap — suggest features, vote on priorities, and help us build exactly what you
|
|
need.
|
|
</p>
|
|
|
|
<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" />
|
|
{feature.text}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|