11'use client' ;
22import React from 'react' ;
3- import Image from 'next/image' ;
43import { ArrowDown } from 'lucide-react' ;
54import { BoundlessButton } from './buttons/BoundlessButton' ;
65
76export default function ProjectPageHero ( ) {
87 const scrollToProjects = ( ) => {
9- const projectsSection = document . getElementById ( 'explore-project' ) ;
10- if ( projectsSection ) {
11- const targetPosition = projectsSection . offsetTop - 100 ;
12- const startPosition = window . pageYOffset ;
13- const distance = targetPosition - startPosition ;
14- const duration = 1000 ;
15- let start : number | null = null ;
8+ const section = document . getElementById ( 'explore-project' ) ;
9+ if ( ! section ) return ;
1610
17- const animation = ( currentTime : number ) => {
18- if ( start === null ) start = currentTime ;
19- const timeElapsed = currentTime - start ;
20- const run = easeInOutQuad (
21- timeElapsed ,
22- startPosition ,
23- distance ,
24- duration
25- ) ;
26- window . scrollTo ( 0 , run ) ;
27- if ( timeElapsed < duration ) requestAnimationFrame ( animation ) ;
28- } ;
11+ const targetPosition = section . offsetTop - 100 ;
12+ const startPosition = window . pageYOffset ;
13+ const distance = targetPosition - startPosition ;
14+ const duration = 1000 ;
15+ let start : number | null = null ;
2916
30- const easeInOutQuad = ( t : number , b : number , c : number , d : number ) => {
31- t /= d / 2 ;
32- if ( t < 1 ) return ( c / 2 ) * t * t + b ;
33- t -- ;
34- return ( - c / 2 ) * ( t * ( t - 2 ) - 1 ) + b ;
35- } ;
17+ const easeInOutQuad = ( t : number , b : number , c : number , d : number ) => {
18+ t /= d / 2 ;
19+ if ( t < 1 ) return ( c / 2 ) * t * t + b ;
20+ t -- ;
21+ return ( - c / 2 ) * ( t * ( t - 2 ) - 1 ) + b ;
22+ } ;
3623
37- requestAnimationFrame ( animation ) ;
38- }
24+ const animation = ( currentTime : number ) => {
25+ if ( start === null ) start = currentTime ;
26+ const timeElapsed = currentTime - start ;
27+ const run = easeInOutQuad ( timeElapsed , startPosition , distance , duration ) ;
28+ window . scrollTo ( 0 , run ) ;
29+ if ( timeElapsed < duration ) requestAnimationFrame ( animation ) ;
30+ } ;
31+
32+ requestAnimationFrame ( animation ) ;
3933 } ;
4034
4135 return (
42- < div className = 'relative min-h-screen overflow-hidden text-white' >
43- < div className = 'pointer-events-none absolute inset-0' >
44- < div className = 'absolute bottom-1/3 left-[220px] h-[393px] w-[476px] rounded-[476px] border-[20px] border-[#DBFFB7] opacity-[0.30px] mix-blend-overlay blur-[25px] md:block lg:!hidden' />
45- < div
46- className = 'absolute bottom-1/3 left-[200px] h-[397px] w-[493px] rounded-[493px] border-[100px] border-[#6DC01A] opacity-[0.15px] mix-blend-hard-light blur-[100px] md:block lg:!hidden'
47- style = { {
48- background :
49- 'linear-gradient(270deg, rgba(3, 3, 3, 0.00) 0%, rgba(109, 192, 26, 0.64) 100%)' ,
50- } }
51- />
52- < div
53- className = 'absolute top-1/4 left-[100px] h-[560px] w-[696px] rounded-[696px] bg-[#A7F950] opacity-10 blur-[140px] md:block lg:!hidden'
54- style = { {
55- background :
56- 'linear-gradient(270deg, rgba(3, 3, 3, 0.00) 0%, rgba(167, 249, 80, 0.64) 100%)' ,
57- } }
58- />
59- </ div >
60-
36+ < div className = 'bg-background-card relative overflow-hidden rounded-2xl px-6 py-10 text-white' >
6137 < div className = 'relative z-10' >
62- < div className = 'mx-auto grid min-h-[85vh] max-w-[1300px] items-center gap-6 space-y-[60px] md:grid-cols-2 md:gap-8 md:space-y-[80px] lg:gap-12' >
38+ < div className = 'mx-auto grid max-w-[1300px] items-center justify-baseline gap-6 md:grid-cols-2 md:gap-8 lg:gap-12' >
39+ { /* Left Text */ }
6340 < div className = 'z-10 space-y-6 text-left md:space-y-6 lg:space-y-8' >
64- < h1 className = 'text-3xl leading-[1.1] tracking-tight sm:text-4xl md:text-4xl lg:text-5xl ' >
41+ < h1 className = 'text-3xl leading-[1.1] tracking-tight sm:text-4xl md:text-4xl lg:text-3xl ' >
6542 < span className = 'bg-gradient-to-r from-[#3AE6B2] to-[#A7F95080] bg-clip-text text-transparent' >
6643 Discover projects
67- </ span >
68- < br />
69- < span className = 'text-white' > that are shaping</ span >
70- < br />
71- < span className = 'text-white' > the future on Stellar</ span >
44+ </ span > { ' ' }
45+ that are shaping the future on Stellar
7246 </ h1 >
7347
7448 < p className = 'max-w-[300px] text-base font-normal text-white md:max-w-[350px] lg:max-w-[400px]' >
7549 Validated by the community. Backed milestone by milestone.
7650 </ p >
51+ </ div >
7752
53+ { /* Buttons */ }
54+ < div className = 'flex flex-col gap-4 sm:flex-row' >
7855 < BoundlessButton
7956 onClick = { scrollToProjects }
8057 size = 'xl'
@@ -86,59 +63,6 @@ export default function ProjectPageHero() {
8663 </ span >
8764 </ BoundlessButton >
8865 </ div >
89-
90- < div className = 'relative hidden h-[60vh] md:block lg:h-[70vh]' >
91- < div className = 'relative mx-auto w-full' >
92- < div className = 'h-full w-full overflow-hidden rounded-2xl bg-black shadow-2xl shadow-black/80' >
93- < div className = 'relative h-full w-full' >
94- < Image
95- src = '/projects.png'
96- alt = 'Project cards showcase'
97- width = { 520 }
98- height = { 580 }
99- className = 'h-auto w-full rounded-lg object-cover'
100- priority
101- />
102- </ div >
103- </ div >
104- </ div >
105- </ div >
106- < div
107- className = 'bg-gradient-radial pointer-events-none absolute inset-0 hidden rounded-lg from-transparent via-transparent to-black md:block'
108- style = { {
109- background :
110- 'linear-gradient(0deg, #030303 0%, rgba(3, 3, 3, 0.80) 20%, rgba(3, 3, 3, 0.44) 41.63%, rgba(3, 3, 3, 0.02) 55.9%, rgba(3, 3, 3, 0.90) 80%, #030303 100%)' ,
111- } }
112- />
113- < div
114- className = 'bg-gradient-radial pointer-events-none absolute inset-0 hidden rounded-lg from-transparent via-transparent to-black md:block'
115- style = { {
116- background :
117- 'linear-gradient(270deg, #030303 0%, rgba(3, 3, 3, 0.24) 18%, rgba(3, 3, 3, 0.24) 40%, #030303 53.9%, rgba(3, 3, 3, 0.00) 100%)' ,
118- } }
119- />
120-
121- < div className = 'md:hidden lg:hidden' >
122- < div className = 'mx-auto max-w-sm overflow-hidden rounded-xl border border-[#1A1A1A] bg-black p-6 shadow-2xl shadow-black/80' >
123- < div className = 'relative' >
124- < Image
125- src = '/projects-mobile.png'
126- alt = 'Project cards showcase'
127- width = { 320 }
128- height = { 420 }
129- className = 'h-auto w-full rounded-lg'
130- priority
131- />
132- < div
133- className = 'pointer-events-none absolute inset-0 rounded-lg'
134- style = { {
135- background :
136- 'radial-gradient(circle at center, transparent 25%, rgba(0,0,0,0.5) 55%, black 80%)' ,
137- } }
138- />
139- </ div >
140- </ div >
141- </ div >
14266 </ div >
14367 </ div >
14468 </ div >
0 commit comments