usulpro
/
banatie-service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add styles to shape section

This commit is contained in:
Oleg Proskurin 2025-12-04 14:40:42 +07:00
parent 0c656d21a2
commit b2cab168bc
1 changed files with 35 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
apps/landing/src/app/homepage/page.tsx
View File

@ -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() {
</p>
{/* Email Form */}
<GlowEffect>
<GlowEffect>
<form
onSubmit={handleSubmit}
className="flex flex-col sm:flex-row gap-2 rounded-[10px] p-1.5 sm:pl-3"
@ -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" />