Skip to content

Commit ee21e34

Browse files
BenjtalkshowBenjtalkshow
authored
Fix landing (#302)
* fix: fix hero svg * fix: revert backed by component
1 parent c8e17d4 commit ee21e34

8 files changed

Lines changed: 111 additions & 67 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: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export function Footer() {
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'
@@ -58,6 +59,7 @@ export function Footer() {
5859
Disclaimer
5960
</Link>
6061
</nav>
62+
6163
<nav
6264
className='flex items-center space-x-4'
6365
aria-label='Social media links'
@@ -69,14 +71,14 @@ export function Footer() {
6971
className='rounded transition-opacity hover:opacity-80 focus:ring-2 focus:ring-white/50 focus:outline-none'
7072
target='_blank'
7173
rel='noopener noreferrer'
72-
aria-label={Follow us on ${name}}
74+
aria-label={`Follow us on ${name}`}
7375
>
7476
<Image
75-
src={/footer/${name}.svg}
76-
alt={${name} icon}
77+
src={`/footer/${name}.svg`}
78+
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-21 w-20'
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
@@ -158,11 +147,11 @@ export function Footer() {
158147
className='rounded transition-opacity hover:opacity-80 focus:ring-2 focus:ring-white/50 focus:outline-none'
159148
target='_blank'
160149
rel='noopener noreferrer'
161-
aria-label={Follow us on ${name}}
150+
aria-label={`Follow us on ${name}`}
162151
>
163152
<Image
164-
src={/footer/${name}.svg}
165-
alt={${name} icon}
153+
src={`/footer/${name}.svg`}
154+
alt={`${name} icon`}
166155
width={24}
167156
height={24}
168157
className='h-6 w-6'
@@ -187,4 +176,4 @@ export function Footer() {
187176
</div>
188177
</footer>
189178
);
190-
}
179+
}

‎lib/config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +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: 'mailto:admin@boundlessfi.xyz',
1112
};
1213
export const ProfileSocialLinks = {
1314
discord: 'https://discord.gg/boundlessfi',
@@ -38,4 +39,4 @@ export const backedBy = [
3839
image: '/trustless.svg',
3940
url: 'https://www.trustlesswork.com/',
4041
},
41-
];
42+
];

‎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)