beautify: add poly background for affiliate-links
This commit is contained in:
parent
f8a16ebf5a
commit
3fc0753c7d
@ -126,8 +126,46 @@ const posts = [
|
|||||||
export default function AffiliateLinksPage() {
|
export default function AffiliateLinksPage() {
|
||||||
return (
|
return (
|
||||||
<PageLayout>
|
<PageLayout>
|
||||||
<div className="bg-gray-900 py-24 sm:py-32">
|
<div className="relative py-24 sm:py-32">
|
||||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
{/* Background Pattern */}
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="absolute inset-0 -z-10 h-full w-full stroke-white/10"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<pattern
|
||||||
|
x="50%"
|
||||||
|
y={-1}
|
||||||
|
id="affiliate-pattern"
|
||||||
|
width={200}
|
||||||
|
height={200}
|
||||||
|
patternUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<path d="M.5 200V.5H200" fill="none" stroke="rgba(255,255,255,0.05)" />
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect fill="url(#affiliate-pattern)" width="100%" height="100%" strokeWidth={0} />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* Colored Blur Effect */}
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
className="absolute top-0 right-0 left-1/2 -z-10 -ml-24 transform-gpu overflow-hidden blur-3xl lg:ml-24 xl:ml-48"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
clipPath:
|
||||||
|
'polygon(63.1% 29.5%, 100% 17.1%, 76.6% 3%, 48.4% 0%, 44.6% 4.7%, 54.5% 25.3%, 59.8% 49%, 55.2% 57.8%, 44.4% 57.2%, 27.8% 47.9%, 35.1% 81.5%, 0% 97.7%, 39.2% 100%, 35.2% 81.4%, 97.2% 52.8%, 63.1% 29.5%)',
|
||||||
|
}}
|
||||||
|
className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-50"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Additional background layers for better visibility */}
|
||||||
|
<div className="absolute inset-0 -z-20 bg-gradient-to-b from-gray-900/95 via-gray-900/80 to-gray-900"></div>
|
||||||
|
<div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,0.1),transparent_65%)]"></div>
|
||||||
|
|
||||||
|
<div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10">
|
||||||
<div className="mx-auto max-w-2xl text-center">
|
<div className="mx-auto max-w-2xl text-center">
|
||||||
<h2 className="text-4xl font-semibold tracking-tight text-balance text-white sm:text-5xl">
|
<h2 className="text-4xl font-semibold tracking-tight text-balance text-white sm:text-5xl">
|
||||||
Affiliate Partners
|
Affiliate Partners
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user