Spaces:
Running
Running
deepsite
/
Website-Generation-Request (1)
/src
/components
/blocks
/ctas
/cta-with-background-noise.tsx
"use client"; | |
import Image from "next/image"; | |
import React from "react"; | |
import { HiArrowRight } from "react-icons/hi2"; | |
export function CTAWithBackgroundNoise() { | |
return ( | |
<section className="w-full grid grid-cols-1 md:grid-cols-2 my-20 md:my-40 justify-start relative z-20 max-w-7xl mx-auto bg-gradient-to-br from-slate-800 dark:from-neutral-900 to-gray-900 sm:rounded-2xl"> | |
<div className="absolute -top-px right-10 md:right-60 bg-gradient-to-r from-transparent via-purple-500 h-px to-transparent w-1/2 z-30"></div> | |
<div className="absolute -top-px right-10 md:right-40 bg-gradient-to-r from-transparent via-indigo-500 h-px to-transparent w-1/2 z-30"></div> | |
<div className="absolute -top-px right-10 md:right-80 bg-gradient-to-r from-transparent via-sky-500 h-px to-transparent w-1/2 z-30"></div> | |
<div | |
className="absolute inset-0 w-full h-full opacity-10 bg-noise [mask-image:radial-gradient(#fff,transparent,75%)]" | |
style={{ | |
backgroundImage: "url(/noise.webp)", | |
backgroundSize: "30%", | |
}} | |
></div> | |
<div className="relative sm:rounded-2xl overflow-hidden px-6 md:px-8 "> | |
<div | |
className="pointer-events-none absolute inset-y-0 right-0 select-none overflow-hidden rounded-2xl" | |
style={{ | |
mask: "radial-gradient(33.875rem 33.875rem at calc(100% - 8.9375rem) 0, white 3%, transparent 70%)", | |
}} | |
></div> | |
<div className="relative px-0 py-10 sm:px-10 sm:pt-20 sm:pb-10 lg:px-10"> | |
<h2 className="text-left text-balance text-2xl md:text-3xl lg:text-5xl font-semibold tracking-[-0.015em] text-white"> | |
Ready to try out the product? | |
</h2> | |
<p className="mt-8 max-w-[26rem] text-left text-base/6 text-neutral-200"> | |
Get instant access to our state of the art project and join the | |
waitlist. | |
</p> | |
<button className="mt-8 flex space-x-2 items-center group text-base px-4 py-2 rounded-lg bg-gradient-to-b from-blue-500 to-blue-700 text-white shadow-[0px_2px_0px_0px_rgba(255,255,255,0.3)_inset]"> | |
<span>Join Waitlist</span> | |
<HiArrowRight className="text-white group-hover:translate-x-1 stroke-[1px] h-3 w-3 mt-0.5 transition-transform duration-200" /> | |
</button> | |
</div> | |
</div> | |
<div className="relative h-full flex gap-4 w-full overflow-hidden max-h-[200px] md:max-h-[400px] px-4"> | |
<Image | |
src="https://assets.aceternity.com/pro/cta-1.jpg" | |
alt="cta-1" | |
width="300" | |
height="500" | |
className="h-full object-cover object-top rounded-lg md:rounded-none mt-4 md:mt-0" | |
/> | |
<Image | |
src="https://assets.aceternity.com/pro/cta-2.jpg" | |
alt="cta-1" | |
width="300" | |
height="500" | |
className="h-full object-cover object-top mt-10 rounded-lg" | |
/> | |
</div> | |
<div className="absolute -bottom-px right-10 md:right-60 bg-gradient-to-r from-transparent via-purple-500 h-px to-transparent w-1/2 z-30"></div> | |
<div className="absolute -bottom-px right-10 md:right-40 bg-gradient-to-r from-transparent via-indigo-500 h-px to-transparent w-1/2 z-30"></div> | |
<div className="absolute -bottom-px right-10 md:right-80 bg-gradient-to-r from-transparent via-sky-500 h-px to-transparent w-1/2 z-30"></div> | |
</section> | |
); | |
} | |