1+ import PrimaryButton from '@/components/ui/custom-button'
2+ import { FlickeringGrid } from '@/components/ui/flickering-grid'
3+ import { ShineBorder } from '@/components/ui/shine-borders'
4+ import { Check } from 'lucide-react'
5+ import Image from 'next/image'
6+ import React from 'react'
7+
8+ const Pricing = ( ) => {
9+ return (
10+ < main className = "w-full overflow-hidden flex flex-col items-center justify-center relative" >
11+ < div className = "px-[30px] py-10 h-[100px] lg:h-[140px] relative overflow-hidden border-b border-[#252525] w-full" >
12+ < h4 className = 'font-medium text-3xl lg:text-5xl tracking-tight absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 z-30 text-center text-balance' > Pricing</ h4 >
13+ < div
14+ style = { {
15+ background : 'radial-gradient(circle at center, #101010 30%, transparent 100%)' ,
16+ } }
17+ className = " h-full w-[100%] right-0 top-0 z-20 absolute" > </ div >
18+ < div className = "absolute right-0 w-[100%] h-full top-0 z-10 opacity-50" >
19+ < FlickeringGrid
20+ className = "absolute -z-0 top-0 right-0"
21+ squareSize = { 3 }
22+ gridGap = { 6 }
23+ color = "#3F1FBC"
24+ maxOpacity = { 1 }
25+ flickerChance = { 0.1 }
26+ height = { 200 }
27+ width = { 2000 }
28+ />
29+ </ div >
30+ </ div >
31+ < div className = "flex flex-col gap-5 lg:gap-10 py-4 bg-[#151515]/20 backdrop-blur-xl h-full relative w-full px-4 lg:px-10" >
32+ < Image
33+ src = "/assets/layer1.svg"
34+ alt = 'background'
35+ fill
36+ className = "object-cover object-bottom w-full h-full absolute -z-10 opacity-95"
37+ />
38+ < div className = "py-2" >
39+ < div className = " border-border-primary w-full mx-auto flex" >
40+ < div className = "border-dashed border-border-primary w-full lg:w-max mx-auto relative" >
41+ < div className = "lg:h-[620px] w-full lg:w-[500px] relative overflow-hidden mx-auto py-10 pb-14" >
42+ < ShineBorder shineColor = { [ "#7150E7" , "#C89BFF" , "#432BA0" ] } />
43+ < Image
44+ src = "/assets/card_bg.svg"
45+ alt = 'background'
46+ fill
47+ className = "object-cover object-bottom w-full h-full absolute -z-10"
48+ />
49+ < div className = "w-full border-dashed border-border-primary px-10 pb-4" >
50+ < div className = "w-12 h-12 relative" >
51+ < Image
52+ src = "/assets/logo_var2.svg"
53+ alt = 'background'
54+ fill
55+ className = "object-cover size-full"
56+ />
57+ </ div >
58+ </ div >
59+
60+ < div className = "w-full border-dashed border-border-primary px-10 py-4" >
61+ < h2 className = 'text-6xl lg:text-[90px] lg:leading-[82px] tracking-tight font-semibold' > $20</ h2 >
62+ </ div >
63+ < div className = "w-full border-dashed border-border-primary px-10 py-4 " >
64+ < h2 className = 'text-xl lg:text-2xl tracking-tight text-left font-bold' > Early Access Lifetime Plan</ h2 >
65+ </ div >
66+ < div className = "w-full border-dashed border-border-primary px-10 py-4 flex flex-col gap-4" >
67+ < h2 className = 'text-lg lg:text-xl tracking-tight text-left font-bold' > WHAT YOU GET:</ h2 >
68+ < div className = "space-y-1 [&>p]:flex [&>p]:items-center [&>p]:gap-2 [&>p]:font-semibold" >
69+ < p > < Check className = 'w-5' strokeWidth = { 4 } /> A beast mode search</ p >
70+ < p > < Check className = 'w-5' strokeWidth = { 4 } /> Newsletter</ p >
71+ < p > < Check className = 'w-5' strokeWidth = { 4 } /> Exclusive community</ p >
72+ < p > < Check className = 'w-5' strokeWidth = { 4 } /> 1:1 mentorship</ p >
73+ < p > < Check className = 'w-5' strokeWidth = { 4 } /> Any premium tools</ p >
74+ </ div >
75+ </ div >
76+ < div className = "bg-white mix-blend-plus-lighter absolute h-[100px] w-full blur-[50px] right-0 -bottom-20" > </ div >
77+ </ div >
78+ </ div >
79+ </ div >
80+ < div className = "w-full border-dashed border-border-primary pt-2 " >
81+ < PrimaryButton classname = 'w-full max-w-[500px] mx-auto' > Buy Now</ PrimaryButton >
82+ </ div >
83+ </ div >
84+
85+
86+
87+ </ div >
88+ </ main >
89+ )
90+ }
91+
92+ export default Pricing
0 commit comments