Skip to content

Commit 883e140

Browse files
0xdevcollins0xdevcollins
committed
2 parents 85db53e + ee21e34 commit 883e140

8 files changed

Lines changed: 113 additions & 70 deletions

File tree

‎components/landing-page/Banner.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Link from 'next/link';
44

55
const CleanBanner = () => {
66
return (
7-
<div className='px-10 md:px-30'>
7+
<div className='mb-20 px-10 md:px-30'>
88
<section className='relative mx-auto min-h-[18rem] max-w-6xl overflow-hidden rounded-[3.2rem]'>
99
<div className='absolute inset-0'>
1010
<CleanBannerBg />

‎components/landing-page/Hero.tsx‎

Lines changed: 50 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -41,16 +41,31 @@ export default function Hero({ className = '' }: HeroProps) {
4141
const setupAnimations = useCallback(() => {
4242
if (!heroRef.current) return;
4343

44-
const ellipseImg = heroRef.current.querySelector('.ellipse-image');
44+
const ellipseImg = heroRef.current.querySelectorAll('.ellipse-image');
4545
const sphereImg = heroRef.current.querySelector('.sphere-image');
4646

4747
if (ellipseImg) {
48-
gsap.to(ellipseImg, {
49-
...animationConfig.ellipse,
50-
willChange: 'transform',
51-
force3D: true,
52-
immediateRender: false,
53-
lazy: true,
48+
ellipseImg.forEach((img, i) => {
49+
// Common scale animation
50+
gsap.to(img, {
51+
...animationConfig.ellipse,
52+
willChange: 'transform',
53+
force3D: true,
54+
immediateRender: false,
55+
lazy: true,
56+
});
57+
58+
// Rotation animation per ellipse
59+
const direction = i === 0 || i === 1 ? 2 : -1;
60+
gsap.to(img, {
61+
rotation: direction * 360,
62+
ease: 'none',
63+
duration: 60,
64+
repeat: -1,
65+
transformOrigin: '50% 50%',
66+
force3D: true,
67+
willChange: 'transform',
68+
});
5469
});
5570
}
5671

@@ -75,7 +90,29 @@ export default function Hero({ className = '' }: HeroProps) {
7590
},
7691
{ scope: heroRef, dependencies: [setupAnimations] }
7792
);
78-
93+
const ellipses = [
94+
{
95+
src: '/elipse1.svg',
96+
width: 'w-[50%]',
97+
z: 'z-10',
98+
opacity: '',
99+
sizes: '50vw',
100+
},
101+
{
102+
src: '/elipse2.svg',
103+
width: 'w-[65%]',
104+
z: 'z-10',
105+
opacity: '',
106+
sizes: '90vw',
107+
},
108+
{
109+
src: '/elipse3.svg',
110+
width: 'w-[80%]',
111+
z: 'z-10',
112+
opacity: '',
113+
sizes: '100vw',
114+
},
115+
];
79116
return (
80117
<header
81118
className={`relative mx-5 flex h-screen min-h-screen items-stretch justify-between pb-9 md:items-end md:pb-[66px] ${className}`}
@@ -99,20 +136,19 @@ export default function Hero({ className = '' }: HeroProps) {
99136
quality={85}
100137
sizes='100vw'
101138
/> */}
102-
{[1, 2, 3].map(elipse => (
139+
{ellipses.map((ellipse, i) => (
103140
<Image
104-
key={`elipse${elipse}`}
105-
src={`/elipse${elipse}.svg`}
141+
key={i}
142+
src={ellipse.src}
106143
alt=''
107-
className={`ellipse-image absolute top-1/2 left-1/2 z-10 h-[90%] ${elipse === 1 ? 'w-[70%]' : elipse === 2 ? 'w-[90%]' : 'w-[1500px]'} -translate-x-1/2 -translate-y-1/2`}
144+
className={`ellipse-image absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 ${ellipse.width} ${ellipse.z} ${ellipse.opacity}`}
108145
width={1920}
109146
height={1080}
110147
priority
111148
quality={85}
112-
sizes='90vw'
149+
sizes={ellipse.sizes}
113150
/>
114151
))}
115-
116152
<div
117153
className='absolute bottom-0 left-0 z-10 h-[150px] w-screen max-w-screen bg-gradient-to-t from-transparent'
118154
style={{

‎components/landing-page/about/AboutUsDifferent.tsx‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,24 @@ function AboutUsDifferent({ className = '' }: AboutUsDifferentProps) {
125125
aria-labelledby={`${feature.id}-title`}
126126
>
127127
<div
128-
className='flex h-[200px] w-full flex-shrink-0 items-center justify-center md:h-[240px]'
128+
className="pointer-events-none absolute inset-0 bg-[url('/card-bg.svg')] bg-center bg-no-repeat"
129+
style={{
130+
opacity: 0.05,
131+
WebkitMaskImage:
132+
'radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 70%)',
133+
WebkitMaskRepeat: 'no-repeat',
134+
WebkitMaskPosition: 'center',
135+
WebkitMaskSize: 'cover',
136+
maskImage:
137+
'radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 70%)',
138+
maskRepeat: 'no-repeat',
139+
maskPosition: 'center',
140+
maskSize: 'cover',
141+
}}
142+
/>
143+
144+
<div
145+
className='relative flex h-[200px] w-full flex-shrink-0 items-center justify-center md:h-[240px]'
129146
style={{ maxWidth: `${feature.image.width}px` }}
130147
>
131148
<Image
@@ -138,7 +155,8 @@ function AboutUsDifferent({ className = '' }: AboutUsDifferentProps) {
138155
quality={90}
139156
/>
140157
</div>
141-
<div className='flex flex-grow flex-col gap-2 px-4 py-4 md:gap-2.5 md:px-8 md:py-6'>
158+
159+
<div className='relative flex flex-grow flex-col gap-2 px-4 py-4 md:gap-2.5 md:px-8 md:py-6'>
142160
<h3
143161
id={`${feature.id}-title`}
144162
className='text-base font-semibold text-white md:text-lg'

‎components/landing-page/footer.tsx‎

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -23,41 +23,43 @@ export function Footer() {
2323
priority
2424
/>
2525
</Link>
26-
<p className='text-sm text-gray-400'>
26+
<p className='text-sm text-[#B5B5B5]'>
2727
© {currentYear} Boundless — Transparent, Community-Driven,
2828
Web3-Native Funding.
2929
</p>
3030
</div>
31+
3132
<div className='flex flex-col items-end space-y-6'>
3233
<nav
3334
className='mb-14 grid grid-cols-2 gap-x-8 gap-y-4 text-center sm:text-left'
3435
aria-label='Legal links'
3536
>
3637
<Link
3738
href='/terms'
38-
className='hover:text-primary rounded text-sm text-gray-400 transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
39+
className='hover:text-primary rounded text-sm text-[#B5B5B5] transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
3940
>
4041
Terms of Service
4142
</Link>
4243
<Link
4344
href='/privacy'
44-
className='hover:text-primary rounded text-sm text-gray-400 transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
45+
className='hover:text-primary rounded text-sm text-[#B5B5B5] transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
4546
>
4647
Privacy Policy
4748
</Link>
4849
<Link
4950
href='/code-of-conduct'
50-
className='hover:text-primary ml-10 rounded text-sm text-gray-400 transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
51+
className='hover:text-primary ml-10 rounded text-sm text-[#B5B5B5] transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
5152
>
5253
Code of Conduct
5354
</Link>
5455
<Link
5556
href='/disclaimer'
56-
className='hover:text-primary ml-5 rounded text-sm text-gray-400 transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
57+
className='hover:text-primary ml-5 rounded text-sm text-[#B5B5B5] transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
5758
>
5859
Disclaimer
5960
</Link>
6061
</nav>
62+
6163
<nav
6264
className='flex items-center space-x-4'
6365
aria-label='Social media links'
@@ -76,7 +78,7 @@ export function Footer() {
7678
alt={`${name} icon`}
7779
width={24}
7880
height={24}
79-
className='h-6 w-6'
81+
className={`${name === 'gmail' ? 'h-18 w-18' : 'h-6 w-6'}`}
8082
/>
8183
</Link>
8284
{index < Object.keys(socialLinks).length - 1 && (
@@ -87,24 +89,11 @@ export function Footer() {
8789
)}
8890
</div>
8991
))}
90-
<div className='ml-4 h-6 w-0.5 bg-[#2B2B2B]' aria-hidden='true' />
91-
<Link
92-
href={`mailto:${socialLinks.gmail}`}
93-
className='rounded transition-opacity hover:opacity-80 focus:ring-2 focus:ring-white/50 focus:outline-none'
94-
aria-label='Contact us via email'
95-
>
96-
<Image
97-
src='/footer/gmail.svg'
98-
alt='Email contact'
99-
width={24}
100-
height={24}
101-
className='h-6 w-6'
102-
/>
103-
</Link>
10492
</nav>
10593
</div>
10694
</div>
10795

96+
{/* Mobile version */}
10897
<div className='flex flex-col items-center space-y-6 md:hidden'>
10998
<Link href='/' aria-label='Boundless homepage'>
11099
<Image
@@ -123,25 +112,25 @@ export function Footer() {
123112
>
124113
<Link
125114
href='/terms'
126-
className='hover:text-primary rounded text-sm text-gray-400 transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
115+
className='hover:text-primary rounded text-sm text-[#B5B5B5] transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
127116
>
128117
Terms of Service
129118
</Link>
130119
<Link
131120
href='/privacy'
132-
className='hover:text-primary rounded text-sm text-gray-400 transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
121+
className='hover:text-primary rounded text-sm text-[#B5B5B5] transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
133122
>
134123
Privacy Policy
135124
</Link>
136125
<Link
137126
href='/code-of-conduct'
138-
className='hover:text-primary ml-10 rounded text-sm text-gray-400 transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
127+
className='hover:text-primary ml-10 rounded text-sm text-[#B5B5B5] transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
139128
>
140129
Code of Conduct
141130
</Link>
142131
<Link
143132
href='/disclaimer'
144-
className='hover:text-primary ml-5 rounded text-sm text-gray-400 transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
133+
className='hover:text-primary ml-5 rounded text-sm text-[#B5B5B5] transition-colors focus:ring-2 focus:ring-white/50 focus:outline-none'
145134
>
146135
Disclaimer
147136
</Link>
@@ -178,7 +167,7 @@ export function Footer() {
178167
))}
179168
</nav>
180169

181-
<p className='text-center text-sm text-gray-400'>
170+
<p className='text-center text-sm text-[#B5B5B5]'>
182171
© {currentYear} Boundless — Transparent,
183172
<br />
184173
Community-Driven, Web3-Native Funding.

‎lib/config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const socialLinks = {
88
github: 'https://github.com/boundlessfi',
99
discord: 'https://discord.gg/boundlessfi',
1010
telegram: 'https://t.me/boundlessfi',
11-
gmail: 'hello@boundlessfi.xyz',
11+
gmail: 'mailto:admin@boundlessfi.xyz',
1212
};
1313
export const ProfileSocialLinks = {
1414
discord: 'https://discord.gg/boundlessfi',

‎public/elipse1.svg‎

Lines changed: 9 additions & 9 deletions
Loading

‎public/elipse2.svg‎

Lines changed: 9 additions & 9 deletions
Loading

‎public/elipse3.svg‎

Lines changed: 9 additions & 9 deletions
Loading

0 commit comments

Comments
 (0)