diff --git a/app/(landing)/about/AboutUsHero.tsx b/app/(landing)/about/AboutUsHero.tsx new file mode 100644 index 000000000..88a661ff1 --- /dev/null +++ b/app/(landing)/about/AboutUsHero.tsx @@ -0,0 +1,122 @@ +'use client'; +import gsap from 'gsap'; +import { useGSAP } from '@gsap/react'; +import { useRef } from 'react'; +import { BoundlessButton } from '@/components/buttons'; +import { DottedUnderline } from '@/components/ui/dotted-underline'; + +export default function AboutUsHero() { + const heroRef = useRef(null); + const gridRef = useRef(null); + const contentRef = useRef(null); + + useGSAP( + () => { + if (gridRef.current) { + gsap.to(gridRef.current, { + rotation: 5, + duration: 15, + ease: 'power2.inOut', + yoyo: true, + repeat: -1, + }); + + gsap.to(gridRef.current, { + scale: 1.02, + duration: 8, + ease: 'power2.inOut', + yoyo: true, + repeat: -1, + }); + + gsap.to(gridRef.current, { + opacity: 0.6, + duration: 4, + ease: 'power2.inOut', + yoyo: true, + repeat: -1, + }); + } + + if (contentRef.current) { + const tl = gsap.timeline(); + + tl.fromTo( + contentRef.current.querySelector('h1'), + { y: 50, opacity: 0 }, + { y: 0, opacity: 1, duration: 1, ease: 'power2.out' } + ) + .fromTo( + contentRef.current.querySelector('p'), + { y: 30, opacity: 0 }, + { y: 0, opacity: 1, duration: 0.8, ease: 'power2.out' }, + '-=0.5' + ) + .fromTo( + contentRef.current.querySelector('.buttons'), + { y: 30, opacity: 0 }, + { y: 0, opacity: 1, duration: 0.8, ease: 'power2.out' }, + '-=0.3' + ); + } + }, + { scope: heroRef } + ); + + return ( +
+
+ +
+

+ Boundless is Where +
+ + Ideas meet Opportunity + +

+ + + +

+ We help innovators validate ideas, raise funds, and access grants & + hackathons through milestone-based support powered by Stellar and + Trustless Work. +

+ +
+ + Explore Projects + + + Submit Your Idea + +
+
+
+ ); +} diff --git a/app/(landing)/about/page.tsx b/app/(landing)/about/page.tsx index c60231447..d18e11b40 100644 --- a/app/(landing)/about/page.tsx +++ b/app/(landing)/about/page.tsx @@ -9,6 +9,7 @@ import AboutLayout from './layout'; import TestimonialsSection from '@/components/testimonials/TestimonialsSection'; import { testimonials } from '@/components/testimonials/data/testimonial'; +import AboutUsHero from './AboutUsHero'; import OurTeam from './OurTeam'; import Partners from './Partners'; @@ -24,11 +25,14 @@ const AboutPage = () => { {/* Boundless Difference */} -
- - -
- +
+ +
+ + +
+ +
diff --git a/components/ui/dotted-underline.tsx b/components/ui/dotted-underline.tsx new file mode 100644 index 000000000..759ac8c01 --- /dev/null +++ b/components/ui/dotted-underline.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +interface DottedUnderlineProps { + className?: string; +} + +export function DottedUnderline({ className = '' }: DottedUnderlineProps) { + return ( +
+
+
+
+
+ ); +} diff --git a/public/about-us-hero-bg.svg b/public/about-us-hero-bg.svg new file mode 100644 index 000000000..f6ea648cb --- /dev/null +++ b/public/about-us-hero-bg.svg @@ -0,0 +1,1019 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +