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

feat: add metal effect

This commit is contained in:
Oleg Proskurin 2025-12-04 15:08:34 +07:00
parent b2cab168bc
commit 988c7946b9
1 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -100,6 +100,22 @@ const customStyles = `
clip-path: ${generateZigzagClipPath(ZIGZAG_POINTS)}; 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.3;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 3;
}
.shape-future-title { .shape-future-title {
font-family: 'Caveat', cursive; font-family: 'Caveat', cursive;
} }
@ -666,7 +682,7 @@ function ShapeTheFutureSection() {
return ( return (
<div className="relative my-[60px]"> <div className="relative my-[60px]">
<section className="shape-future bg-[#2a2a2a] relative z-[2]"> <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] " /> <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'> <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] " /> <section className="shape-future bg-black absolute w-full h-[500px] top-[-430px] left-[2px] opacity-30 z-[2] " />