Spaces:
Running
Running
File size: 3,409 Bytes
21a686e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
"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>
);
}
|