Skip to content

Commit 2ddd4d7

Browse files
VansRouges0xdevcollins
VansRouges
and
0xdevcollins
authored
feat: implement footer section with responsive design (#266)
- Add Footer component with desktop and mobile layouts - Integrate social media icons (Discord, Telegram, GitHub, LinkedIn, X, Gmail) - Include Terms of Service and Privacy Policy links - Add responsive design matching Figma specifications - Export Footer component from landing-page index Closes #229 Co-authored-by: Collins Ikechukwu <collinschristroa@gmail.com>
1 parent 43c454d commit 2ddd4d7

11 files changed

Lines changed: 245 additions & 54 deletions

File tree

‎README.md‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -164,17 +164,20 @@ Before you begin, ensure you have the following installed:
164164
- This creates a copy of the repository in your GitHub account
165165

166166
2. **Clone your fork:**
167+
167168
```bash
168169
git clone https://github.com/YOUR_USERNAME/boundless-frontend.git
169170
cd boundless-frontend
170171
```
171172

172173
3. **Add upstream remote:**
174+
173175
```bash
174176
git remote add upstream https://github.com/boundlessfi/boundless-frontend.git
175177
```
176178

177179
4. **Install dependencies:**
180+
178181
```bash
179182
npm install
180183
# or
@@ -183,29 +186,32 @@ Before you begin, ensure you have the following installed:
183186

184187
5. **Configure environment variables:**
185188
Create a `.env.local` file in the root directory:
189+
186190
```bash
187191
touch .env.local
188192
```
189-
193+
190194
Fill in the required environment variables in `.env.local`:
195+
191196
```env
192197
# NextAuth Configuration
193198
NEXTAUTH_SECRET=your-secret-key
194199
NEXTAUTH_URL=http://localhost:3000
195-
200+
196201
# Google OAuth (optional)
197202
GOOGLE_CLIENT_ID=your-google-client-id
198203
GOOGLE_CLIENT_SECRET=your-google-client-secret
199-
204+
200205
# API Configuration
201206
NEXT_PUBLIC_API_URL=http://localhost:8000/api
202-
207+
203208
# Stellar Configuration
204209
NEXT_PUBLIC_STELLAR_NETWORK=testnet
205210
NEXT_PUBLIC_APP_URL=http://localhost:3000
206211
```
207212

208213
6. **Run the development server:**
214+
209215
```bash
210216
npm run dev
211217
# or
@@ -339,4 +345,4 @@ This project is licensed under the MIT License. See [LICENSE](LICENSE) for detai
339345

340346
---
341347

342-
**Made with ❤️ by the Boundless team**
348+
**Made with ❤️ by the Boundless team**

‎app/(landing)/page.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
66
import { ScrollSmoother } from 'gsap/ScrollSmoother';
77
import { useEffect, useRef, useState } from 'react';
88
import BeamBackground from '@/components/landing-page/BeamBackground';
9-
import { Hero } from '@/components/landing-page';
9+
import { Hero, Footer } from '@/components/landing-page';
1010
import HowBoundlessWork from '@/components/landing-page/HowBoundlessWork';
1111
import WhyBoundless from '@/components/landing-page/WhyBoundless';
1212
import BackedBy from '@/components/landing-page/BackedBy';
@@ -138,6 +138,7 @@ export default function LandingPage() {
138138
<NewsLetter />
139139
<BlogSection />
140140
<HowBoundlessWork />
141+
<Footer />
141142
</div>
142143
</div>
143144
);

‎components/landing-page/footer.tsx‎

Lines changed: 131 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,152 @@
11
import Link from 'next/link';
2+
import Image from 'next/image';
23

34
export function Footer() {
45
const currentYear = new Date().getFullYear();
56

7+
const socialLinks = [
8+
{ name: 'Discord', icon: '/footer/discord.svg', href: '#' },
9+
{ name: 'Telegram', icon: '/footer/telegram.svg', href: '#' },
10+
{ name: 'GitHub', icon: '/footer/github.svg', href: '#' },
11+
{ name: 'LinkedIn', icon: '/footer/linkedin.svg', href: '#' },
12+
{ name: 'X', icon: '/footer/x.svg', href: '#' },
13+
];
14+
615
return (
7-
<footer className='bg-background/50 border-t border-border'>
8-
<div className='max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8'>
9-
<div className='flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0'>
10-
{/* Copyright */}
11-
<div className='text-muted-foreground text-sm'>
12-
© {currentYear} Boundless. All rights reserved.
16+
<footer className='bg-black border-t border-gray-800'>
17+
<div className='max-w py-8 px- sm:px- lg:px-'>
18+
{/* Desktop Layout */}
19+
<div className='hidden md:flex justify-between items-start'>
20+
{/* Left side - Logo and Copyright */}
21+
<div className='flex flex-col space-y-4'>
22+
<Image
23+
src='/footer/logo.svg'
24+
alt='Boundless'
25+
width={120}
26+
height={40}
27+
className='w-14 mb-14'
28+
/>
29+
<div className='text-gray-400 text-sm'>
30+
© {currentYear} Boundless — Transparent, Community-Driven,
31+
Web3-Native Funding.
32+
</div>
1333
</div>
1434

15-
{/* Links */}
16-
<div className='flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-6'>
35+
{/* Right side - Links and Social Icons */}
36+
<div className='flex flex-col items-end space-y-6'>
37+
{/* Policy Links */}
38+
<div className='flex space-x-8 mb-14'>
39+
<Link
40+
href='/terms'
41+
className='text-gray-400 hover:text-white text-sm transition-colors'
42+
>
43+
Terms of Service
44+
</Link>
45+
<Link
46+
href='/privacy'
47+
className='text-gray-400 hover:text-white text-sm transition-colors'
48+
>
49+
Privacy Policy
50+
</Link>
51+
</div>
52+
53+
{/* Social Icons */}
54+
<div className='flex space-x-4'>
55+
{socialLinks.map(social => (
56+
<>
57+
<Link
58+
key={social.name}
59+
href={social.href}
60+
className='hover:opacity-80 transition-opacity'
61+
>
62+
<Image
63+
src={social.icon}
64+
alt={social.name}
65+
width={24}
66+
height={24}
67+
className='w-6 h-6'
68+
/>
69+
</Link>
70+
<div className='bg-[#2B2B2B] w-0.5 h-6'></div>
71+
</>
72+
))}
73+
<Link href='#' className='hover:opacity-80 transition-opacity'>
74+
<Image
75+
src='/footer/gmail.svg'
76+
alt='gmail'
77+
width={24}
78+
height={24}
79+
className='w-24 h-6'
80+
/>
81+
</Link>
82+
</div>
83+
</div>
84+
</div>
85+
86+
{/* Mobile Layout */}
87+
<div className='md:hidden flex flex-col items-center space-y-6'>
88+
{/* Logo */}
89+
<Image
90+
src='/footer/logo.svg'
91+
alt='Boundless'
92+
width={120}
93+
height={40}
94+
className='h-10 w-auto'
95+
/>
96+
97+
{/* Policy Links */}
98+
<div className='flex space-x-8'>
1799
<Link
18100
href='/terms'
19-
className='text-muted-foreground hover:text-white/80 text-sm transition-colors'
101+
className='text-gray-400 hover:text-white text-sm transition-colors'
20102
>
21-
Terms
103+
Terms of Service
22104
</Link>
23105
<Link
24106
href='/privacy'
25-
className='text-muted-foreground hover:text-white/80 text-sm transition-colors'
107+
className='text-gray-400 hover:text-white text-sm transition-colors'
26108
>
27-
Privacy
109+
Privacy Policy
28110
</Link>
29-
<Link
30-
href='/code-of-conduct'
31-
className='text-muted-foreground hover:text-white/80 text-sm transition-colors'
32-
>
33-
Code of Conduct
111+
</div>
112+
113+
{/* Social Icons */}
114+
<div className='flex space-x-4'>
115+
{socialLinks.map(social => (
116+
<>
117+
<Link
118+
key={social.name}
119+
href={social.href}
120+
className='hover:opacity-80 transition-opacity'
121+
>
122+
<Image
123+
src={social.icon}
124+
alt={social.name}
125+
width={24}
126+
height={24}
127+
className='w-6 h-6'
128+
/>
129+
</Link>
130+
<div className='bg-[#2B2B2B] w-0.5 h-6'></div>
131+
</>
132+
))}
133+
<Link href='#' className='hover:opacity-80 transition-opacity'>
134+
<Image
135+
src='/footer/gmail.svg'
136+
alt='gmail'
137+
width={24}
138+
height={24}
139+
className='w-24 h-6'
140+
/>
34141
</Link>
35142
</div>
143+
144+
{/* Copyright */}
145+
<div className='text-gray-400 text-sm text-center'>
146+
© {currentYear} Boundless — Transparent,
147+
<br />
148+
Community-Driven, Web3-Native Funding.
149+
</div>
36150
</div>
37151
</div>
38152
</footer>

‎package-lock.json‎

Lines changed: 31 additions & 31 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/footer/discord.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎public/footer/github.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎public/footer/gmail.svg‎

Lines changed: 12 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)