Skip to content

Commit d09bf16

Browse files
0xdevcollins0xdevcollins
committed
feat: enhance Projects page with new hero component and layout adjustments
- Added ProjectPageHero component to the Projects page for improved visual appeal. - Updated layout styles in ProjectsPage for better responsiveness and design consistency. - Refined background effects and button styles in ProjectPageHero for a more engaging user experience.
1 parent 68938b8 commit d09bf16

4 files changed

Lines changed: 57 additions & 40 deletions

File tree

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from 'react';
22
import { Metadata } from 'next';
33
import { generatePageMetadata } from '@/lib/metadata';
4+
import ProjectPageHero from '@/components/Project-Page-Hero';
45

56
export const metadata: Metadata = generatePageMetadata('projects');
67

78
const ProjectsPage = () => {
89
return (
9-
<div className='mt-10 text-center text-4xl font-bold text-white'>
10+
<div className=''>
11+
<ProjectPageHero />
1012
<h1 className='mb-10'>Projects</h1>
11-
<div className='flex flex-wrap justify-center gap-8'>
12-
{/* Project cards will be rendered here */}
13-
</div>
13+
<div className='flex flex-wrap justify-center gap-8'></div>
1414
</div>
1515
);
1616
};

‎components/Project-Page-Hero.tsx‎

Lines changed: 48 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,34 @@
11
import React from 'react';
22
import Image from 'next/image';
33
import { ArrowDown } from 'lucide-react';
4+
import { BoundlessButton } from './buttons/BoundlessButton';
45

56
export default function ProjectPageHero() {
67
return (
78
<div className='relative min-h-screen overflow-hidden bg-black text-white'>
8-
{/* Subtle Background Effects */}
99
<div className='pointer-events-none absolute inset-0'>
10-
<div className='absolute top-1/4 right-1/4 h-[300px] w-[300px] bg-[#A7F950] opacity-10 blur-[100px]' />
11-
<div className='absolute bottom-1/3 left-1/3 h-[250px] w-[250px] bg-[#A7F950] opacity-8 blur-[80px]' />
10+
<div className='absolute bottom-1/3 left-[220px] h-[393px] w-[476px] rounded-[476px] border-[20px] border-[#DBFFB7] opacity-[0.30px] mix-blend-overlay blur-[25px] md:block' />
11+
<div
12+
className='absolute bottom-1/3 left-[200px] h-[397px] w-[493px] rounded-[493px] border-[100px] border-[#6DC01A] opacity-[0.15px] mix-blend-hard-light blur-[100px] md:block'
13+
style={{
14+
background:
15+
'linear-gradient(270deg, rgba(3, 3, 3, 0.00) 0%, rgba(109, 192, 26, 0.64) 100%)',
16+
}}
17+
/>
18+
<div
19+
className='absolute top-1/4 left-[100px] h-[560px] w-[696px] rounded-[696px] bg-[#A7F950] opacity-10 blur-[140px] md:block'
20+
style={{
21+
background:
22+
'linear-gradient(270deg, rgba(3, 3, 3, 0.00) 0%, rgba(167, 249, 80, 0.64) 100%)',
23+
}}
24+
/>
1225
</div>
1326

14-
<div className='relative z-10 container mx-auto px-4 py-8 sm:px-6 lg:px-8 lg:py-16'>
15-
<div className='grid min-h-[85vh] items-center gap-6 md:grid-cols-2 lg:gap-12'>
16-
{/* Left Content Section */}
17-
<div className='space-y-6 text-center lg:space-y-8 lg:text-left'>
18-
<h1 className='text-3xl leading-[1.1] font-bold tracking-tight sm:text-4xl lg:text-5xl xl:text-6xl'>
19-
<span className='bg-gradient-to-r from-[#A7F950] to-[#3AE6B2] bg-clip-text text-transparent'>
27+
<div className='relative z-10 container mx-auto px-4 py-8 sm:px-6 md:px-8 lg:px-8 lg:py-16'>
28+
<div className='grid min-h-[85vh] items-center gap-6 md:grid-cols-2 md:gap-8 lg:gap-12'>
29+
<div className='z-10 space-y-6 text-left md:space-y-6 lg:space-y-8'>
30+
<h1 className='text-3xl leading-[1.1] tracking-tight sm:text-4xl md:text-4xl lg:text-5xl'>
31+
<span className='bg-gradient-to-r from-[#3AE6B2] to-[#A7F95080] bg-clip-text text-transparent'>
2032
Discover projects
2133
</span>
2234
<br />
@@ -25,47 +37,53 @@ export default function ProjectPageHero() {
2537
<span className='text-white'>the future on Stellar</span>
2638
</h1>
2739

28-
<p className='mx-auto max-w-md text-base font-normal text-white sm:text-lg lg:mx-0 lg:text-xl'>
40+
<p className='max-w-[300px] text-base font-normal text-white md:max-w-[350px] lg:max-w-[400px]'>
2941
Validated by the community. Backed milestone by milestone.
3042
</p>
3143

32-
<button className='group relative transform rounded-lg bg-[#A7F950] px-6 py-3 text-sm font-semibold text-black transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-[#A7F950]/25 lg:px-8 lg:py-4 lg:text-base'>
44+
<BoundlessButton
45+
size='xl'
46+
className='group relative transform rounded-lg bg-[#A7F950] px-6 py-3 text-sm font-semibold text-black transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-[#A7F950]/25 md:px-7 md:py-3.5 md:text-base lg:px-8 lg:py-4 lg:text-base'
47+
>
3348
<span className='flex items-center gap-2'>
3449
Start Exploring Projects
35-
<ArrowDown className='h-4 w-4 transition-transform group-hover:translate-y-1 lg:h-5 lg:w-5' />
50+
<ArrowDown className='h-4 w-4 transition-transform group-hover:translate-y-1 md:h-4 md:w-4 lg:h-5 lg:w-5' />
3651
</span>
37-
</button>
52+
</BoundlessButton>
3853
</div>
3954

40-
{/* Right Cards Section - Desktop */}
41-
<div className='relative hidden md:block'>
42-
<div className='relative mx-auto w-full max-w-[580px]'>
43-
{/* Dark container with spotlight effect */}
44-
<div className='overflow-hidden rounded-2xl bg-black p-8 shadow-2xl shadow-black/80'>
45-
<div className='relative'>
55+
<div className='relative hidden h-[60vh] md:block lg:h-[70vh]'>
56+
<div className='relative mx-auto w-full'>
57+
<div className='h-full w-full overflow-hidden rounded-2xl bg-black shadow-2xl shadow-black/80'>
58+
<div className='relative h-full w-full'>
4659
<Image
4760
src='/projects.png'
4861
alt='Project cards showcase'
4962
width={520}
5063
height={580}
51-
className='h-auto w-full rounded-lg'
64+
className='h-auto w-full rounded-lg object-cover'
5265
priority
5366
/>
54-
{/* Spotlight effect - dark edges, bright center */}
55-
<div
56-
className='bg-gradient-radial pointer-events-none absolute inset-0 rounded-lg from-transparent via-transparent to-black'
57-
style={{
58-
background:
59-
'radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.4) 60%, black 85%)',
60-
}}
61-
/>
6267
</div>
6368
</div>
6469
</div>
6570
</div>
71+
<div
72+
className='bg-gradient-radial pointer-events-none absolute inset-0 rounded-lg from-transparent via-transparent to-black md:block'
73+
style={{
74+
background:
75+
'linear-gradient(0deg, #030303 0%, rgba(3, 3, 3, 0.80) 20%, rgba(3, 3, 3, 0.44) 41.63%, rgba(3, 3, 3, 0.02) 55.9%, rgba(3, 3, 3, 0.90) 80%, #030303 100%)',
76+
}}
77+
/>
78+
<div
79+
className='bg-gradient-radial pointer-events-none absolute inset-0 rounded-lg from-transparent via-transparent to-black md:block'
80+
style={{
81+
background:
82+
'linear-gradient(270deg, #030303 0%, rgba(3, 3, 3, 0.24) 18%, rgba(3, 3, 3, 0.24) 40%, #030303 53.9%, rgba(3, 3, 3, 0.00) 100%)',
83+
}}
84+
/>
6685

67-
{/* Mobile Cards Section */}
68-
<div className='md:hidden'>
86+
<div className='md:hidden lg:hidden'>
6987
<div className='mx-auto max-w-sm overflow-hidden rounded-xl border border-[#1A1A1A] bg-black p-6 shadow-2xl shadow-black/80'>
7088
<div className='relative'>
7189
<Image
@@ -76,7 +94,6 @@ export default function ProjectPageHero() {
7694
className='h-auto w-full rounded-lg'
7795
priority
7896
/>
79-
{/* Spotlight effect for mobile - dark edges, bright center */}
8097
<div
8198
className='pointer-events-none absolute inset-0 rounded-lg'
8299
style={{

‎components/landing-page/Hero.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ export default function Hero({ className = '' }: HeroProps) {
120120

121121
<div
122122
ref={contentRef}
123-
className='z-30 mt-[120px] mb-10 flex h-full w-full flex-col justify-between gap-4 md:h-auto md:flex-row md:items-end'
123+
className='z-30 mt-[28px] mb-10 flex h-full w-full flex-col justify-between gap-4 md:mt-[120px] md:h-auto md:flex-row md:items-end'
124124
>
125125
<h1
126126
id='hero-heading'
@@ -132,7 +132,7 @@ export default function Hero({ className = '' }: HeroProps) {
132132
</span>
133133
</h1>
134134

135-
<div className='relative bottom-[150px] md:bottom-0 md:max-w-[466px]'>
135+
<div className='relative bottom-[50px] md:bottom-0 md:max-w-[466px]'>
136136
<p
137137
className='text-[14px] leading-[150%] text-white lg:text-[14px] xl:text-[16px]'
138138
style={{

‎components/landing-page/navbar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -154,8 +154,8 @@ export function Navbar() {
154154
<div className='px-5 py-5 md:px-[50px] lg:px-[100px]'>
155155
<div
156156
className={cn(
157-
'grid grid-cols-[auto_1fr_auto] items-center justify-items-center',
158-
isAuthenticated && 'justify-items-start'
157+
'grid grid-cols-2 items-center md:grid-cols-[auto_1fr_auto] md:justify-items-center',
158+
isAuthenticated && 'md:justify-items-start'
159159
)}
160160
>
161161
<div className='flex-shrink-0'>
@@ -393,7 +393,7 @@ function MobileMenu({
393393
};
394394

395395
return (
396-
<div ref={mobileMenuRef} className='md:hidden'>
396+
<div ref={mobileMenuRef} className='justify-self-end md:hidden'>
397397
<Sheet
398398
onOpenChange={open => {
399399
if (open) {

0 commit comments

Comments
 (0)