Skip to content

Commit bb05e66

Browse files
Marvelousmicheal0xdevcollins
Marvelousmicheal
and
0xdevcollins
authored
feat: build responsive 'What Makes Boundless Different' section (#187)
Co-authored-by: Collins Ikechukwu <collinschristroa@gmail.com>
1 parent 7a4d6ea commit bb05e66

10 files changed

Lines changed: 5033 additions & 2 deletions

File tree

‎app/(landing)/about/page.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { Metadata } from 'next';
33
import { generatePageMetadata } from '@/lib/metadata';
4+
import AboutUsDifferent from '@/components/landing-page/about/AboutUsDifferent';
45

56
import Timeline from '@/components/landing-page/about/timeline/Timeline';
67
import AboutLayout from './layout';
@@ -19,12 +20,13 @@ const AboutPage = () => {
1920
{/* Boundless Difference */}
2021
<Timeline />
2122

22-
<div className="relative z-10 space-y-[23px] md:space-y-[80px] max-w-[1300px] mx-auto">
23+
<div className='relative z-10 space-y-[23px] md:space-y-[80px] max-w-[1300px] mx-auto'>
2324
<OurTeam />
2425
<Partners />
25-
<div className="text-white text-4xl font-bold text-center mt-10">
26+
<div className='text-white text-4xl font-bold text-center mt-10'>
2627
<TestimonialsSection testimonials={testimonials} />
2728
</div>
29+
<AboutUsDifferent />
2830
</div>
2931
</AboutLayout>
3032
);

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

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import Image from 'next/image';
2+
3+
function AboutUsDifferent() {
4+
return (
5+
<section className='flex flex-col items-center gap-10 md:py-[100px] py-8 relative overflow-hidden md:px-0 px-4'>
6+
<Image
7+
src='bg-header-about.svg'
8+
alt='Header background'
9+
width={1240}
10+
height={1324}
11+
className='absolute top-0'
12+
/>
13+
<div className='relative md:w-[1240px] w-full md:h-[200px] flex items-center justify-center pb-6'>
14+
<h1 className='font-normal text--[32px] md:text-5xl text-white text-center'>
15+
What Makes Boundless
16+
<br className='md:hidden block' /> Different
17+
</h1>
18+
</div>
19+
<main className='flex flex-col gap-6 md:w-[1240px] w-full md:h-[884px]'>
20+
<div className='flex gap-6 justify-center md:flex-row flex-col items-center '>
21+
<main className='md:w-[716px] w-[350px] h-[430px] rounded-[12px] p-[1px] bg-gradient-to-b from-white/48 to-white/8'>
22+
<div className='w-full h-full rounded-[12px] bg-black/85 bg-[url("/card-bg.svg")] bg-no-repeat bg-center backdrop:blur-2xl p-6 flex flex-col items-center gap-6 text-left'>
23+
<div className='md:w-[668px] w-[302px] md:h-[269px] h-[243px] flex justify-center items-center'>
24+
<Image
25+
src='card1.svg'
26+
width='520'
27+
height='241'
28+
alt='Milestone Escrow'
29+
/>
30+
</div>
31+
<div className='px-8 py-6 pb-1 flex flex-col gap-2.5'>
32+
<h4 className='font-semibold text-base text-white'>
33+
Validation First
34+
</h4>
35+
<p className='font-normal text-base text-stepper-text-inactive'>
36+
Ideas are filtered through community-driven voting and
37+
feedback before funds <br /> are raised.
38+
</p>
39+
</div>
40+
</div>
41+
</main>
42+
43+
<main className='md:w-[500px] w-[350px] h-[430px] rounded-[12px] p-[1px] bg-gradient-to-b from-white/48 to-white/8'>
44+
<div className='w-full h-full rounded-[12px] bg-black/85 bg-[url("/card-bg.svg")] bg-no-repeat bg-center backdrop:blur-2xl p-6 flex flex-col items-center gap-6 text-left'>
45+
<div className='md:w-[452px] w-[302px] md:h-[269px] h-[243px] flex justify-center items-center'>
46+
<Image
47+
src='card2.svg'
48+
width={452}
49+
height={205}
50+
alt='Milestone Escrow'
51+
/>
52+
</div>
53+
<div className='px-8 py-6 pb-1 flex flex-col gap-2.5'>
54+
<h4 className='font-semibold text-base text-white'>
55+
Milestone Escrow
56+
</h4>
57+
<p className='font-normal text-base text-stepper-text-inactive'>
58+
Backers are protected. Funds are only released <br /> when
59+
project milestones are achieved and verified.
60+
</p>
61+
</div>
62+
</div>
63+
</main>
64+
</div>
65+
<div className='flex gap-6 justify-center md:flex-row flex-col items-center'>
66+
<main className='md:w-[500px] w-[350px] h-[430px] rounded-[12px] p-[1px] bg-gradient-to-b from-white/48 to-white/8'>
67+
<div className='w-full h-full rounded-[12px] bg-black/85 bg-[url("/card-bg.svg")] bg-no-repeat bg-center backdrop:blur-2xl p-6 flex flex-col items-center gap-6 text-left'>
68+
<div className='md:w-[452px] w-[302px] md:h-[269px] h-[243px] flex justify-center items-center'>
69+
<Image
70+
src='card3.svg'
71+
width={452}
72+
height={205}
73+
alt='Milestone Escrow'
74+
/>
75+
</div>
76+
<div className='px-8 py-6 pb-1 flex flex-col gap-2.5'>
77+
<h4 className='font-semibold text-base text-white'>
78+
Inclusive Growth
79+
</h4>
80+
<p className='font-normal text-base text-stepper-text-inactive'>
81+
Crowdfunding, grants, and hackathons all opportunities in one
82+
ecosystem.
83+
</p>
84+
</div>
85+
</div>
86+
</main>
87+
<main className='md:w-[716px] w-[350px] h-[430px] rounded-[12px] p-[1px] bg-gradient-to-b from-white/48 to-white/8'>
88+
<div className='w-full h-full rounded-[12px] bg-black/85 bg-[url("/card-bg.svg")] bg-no-repeat bg-center backdrop:blur-2xl p-6 flex flex-col items-center gap-6 text-left'>
89+
<div className='md:w-[668px] w-[302px] md:h-[269px] h-[243px] flex justify-center items-center'>
90+
<Image
91+
src='card4.svg'
92+
width='620'
93+
height='258'
94+
alt='Milestone Escrow'
95+
/>
96+
</div>
97+
<div className='px-8 py-6 pb-1 flex flex-col gap-2.5'>
98+
<h4 className='font-semibold text-base text-white'>
99+
Blockchain-Powered
100+
</h4>
101+
<p className='font-normal text-base text-stepper-text-inactive'>
102+
Built on Stellar and integrated with Trustless Work for
103+
secure, transparent funding.
104+
</p>
105+
</div>
106+
</div>
107+
</main>
108+
</div>
109+
</main>
110+
</section>
111+
);
112+
}
113+
114+
export default AboutUsDifferent;

‎public/bg-header-about.svg‎

Lines changed: 102 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)