ad project card
This commit is contained in:
@@ -1,124 +1,186 @@
|
||||
'use client'
|
||||
import { Button } from './button'
|
||||
import { Heading, Subheading } from './text'
|
||||
import { clsx } from 'clsx'
|
||||
import { ChevronRightIcon } from '@heroicons/react/20/solid'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { ChevronRightIcon } from '@heroicons/react/20/solid'
|
||||
import { clsx } from 'clsx'
|
||||
import { Button } from './button'
|
||||
|
||||
const phases = ['All', 'Phase 1', 'Phase 2', 'Phase 3']
|
||||
const filters = {
|
||||
category: ['All', 'Education', 'Health', 'Climate', 'Infrastructure'],
|
||||
country: ['All', 'South Africa', 'Brazil', 'Tanzania'],
|
||||
status: ['All', 'Active', 'Funded', 'Closed'],
|
||||
funding: ['All', 'Donation', 'Investment', 'Pay-it-Forward'],
|
||||
}
|
||||
|
||||
const posts = [
|
||||
const projects = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Boost your conversion rate',
|
||||
href: '#',
|
||||
description:
|
||||
'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde..',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
|
||||
title: 'Zanzibar Schools',
|
||||
imageUrl: '/portfolio/zanzibar.jpg',
|
||||
impactGoal: 'Build 10 sustainable classrooms',
|
||||
location: 'Zanzibar, Tanzania',
|
||||
category: 'Education',
|
||||
country: 'Tanzania',
|
||||
status: 'Active',
|
||||
fundingType: 'Donation',
|
||||
fundedPercent: 68,
|
||||
contributors: 128,
|
||||
phase: 'Phase 1',
|
||||
datetime: '2020-03-16',
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Boost your conversion rate',
|
||||
title: 'Kayamandi Health Hub',
|
||||
imageUrl: '/portfolio/kayamandi.jpg',
|
||||
impactGoal: 'Provide care to 500 families',
|
||||
location: 'Stellenbosch, South Africa',
|
||||
category: 'Health',
|
||||
country: 'South Africa',
|
||||
status: 'Funded',
|
||||
fundingType: 'Investment',
|
||||
fundedPercent: 100,
|
||||
contributors: 302,
|
||||
phase: 'Phase 2',
|
||||
href: '#',
|
||||
description:
|
||||
'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde..',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
|
||||
phase: 'Phase 1',
|
||||
datetime: '2020-03-16',
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Boost your conversion rate',
|
||||
title: 'Southern Cape Solar',
|
||||
imageUrl: '/portfolio/southern.jpg',
|
||||
impactGoal: 'Power 200 homes with clean energy',
|
||||
location: 'Southern Cape, South Africa',
|
||||
category: 'Climate',
|
||||
country: 'South Africa',
|
||||
status: 'Active',
|
||||
fundingType: 'Investment',
|
||||
fundedPercent: 54,
|
||||
contributors: 91,
|
||||
phase: 'Phase 3',
|
||||
href: '#',
|
||||
description:
|
||||
'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. ',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
|
||||
phase: 'Phase 1',
|
||||
datetime: '2020-03-16',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'Boost your conversion rate',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Township WiFi Project',
|
||||
imageUrl: '/portfolio/township.jpg',
|
||||
impactGoal: 'Free internet for 1,000 students',
|
||||
location: 'Johannesburg, South Africa',
|
||||
category: 'Infrastructure',
|
||||
country: 'South Africa',
|
||||
status: 'Active',
|
||||
fundingType: 'Pay-it-Forward',
|
||||
fundedPercent: 32,
|
||||
contributors: 45,
|
||||
phase: 'Phase 2',
|
||||
href: '#',
|
||||
description:
|
||||
'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. ',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Durban Climate Garden',
|
||||
imageUrl: '/portfolio/durban.jpg',
|
||||
impactGoal: 'Grow 5 community food forests',
|
||||
location: 'Durban, South Africa',
|
||||
category: 'Climate',
|
||||
country: 'South Africa',
|
||||
status: 'Funded',
|
||||
fundingType: 'Donation',
|
||||
fundedPercent: 100,
|
||||
contributors: 212,
|
||||
phase: 'Phase 3',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Rio Digital Youth Labs',
|
||||
imageUrl: '/portfolio/rio.jpg',
|
||||
impactGoal: 'Train 1,000 young coders',
|
||||
location: 'Rio de Janeiro, Brazil',
|
||||
category: 'Education',
|
||||
country: 'Brazil',
|
||||
status: 'Active',
|
||||
fundingType: 'Pay-it-Forward',
|
||||
fundedPercent: 45,
|
||||
contributors: 89,
|
||||
phase: 'Phase 1',
|
||||
datetime: '2020-03-16',
|
||||
},
|
||||
|
||||
// More posts...
|
||||
href: '#',
|
||||
},
|
||||
]
|
||||
|
||||
export default function ProjectCard() {
|
||||
const [activePhase, setActivePhase] = useState('All')
|
||||
const [filtersState, setFiltersState] = useState({
|
||||
category: 'All',
|
||||
country: 'All',
|
||||
status: 'All',
|
||||
funding: 'All',
|
||||
})
|
||||
|
||||
const filteredPosts = activePhase === 'All'
|
||||
? posts
|
||||
: posts.filter(post => post.phase === activePhase)
|
||||
const handleFilterChange = (type: string, value: string) => {
|
||||
setFiltersState(prev => ({ ...prev, [type]: value }))
|
||||
}
|
||||
|
||||
const filteredProjects = projects.filter(project => {
|
||||
return (
|
||||
(filtersState.category === 'All' || project.category === filtersState.category) &&
|
||||
(filtersState.country === 'All' || project.country === filtersState.country) &&
|
||||
(filtersState.status === 'All' || project.status === filtersState.status) &&
|
||||
(filtersState.funding === 'All' || project.fundingType === filtersState.funding)
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="bg-white py-24 sm:py-32">
|
||||
<div className="bg-white py-24">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="flex flex-col items-center space-y-8">
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
|
||||
From foundation to contribution
|
||||
</h2>
|
||||
<p className="mt-2 text-lg/8 text-gray-600">Deliver transformational experiences anywhere</p>
|
||||
</div>
|
||||
<div className="flex justify-center gap-4">
|
||||
{phases.map((phase) => (
|
||||
<button
|
||||
key={phase}
|
||||
onClick={() => setActivePhase(phase)}
|
||||
className={clsx(
|
||||
'px-4 py-2 rounded-full text-sm font-medium transition-colors',
|
||||
activePhase === phase
|
||||
? 'bg-indigo-600 text-white'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
)}
|
||||
>
|
||||
{phase}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center max-w-2xl mx-auto">
|
||||
<h2 className="text-4xl font-semibold text-gray-900 sm:text-5xl">Explore Impact Projects</h2>
|
||||
<p className="mt-2 text-lg text-gray-600">Back causes that shape a better future.</p>
|
||||
</div>
|
||||
<div className="mx-auto mt-16 grid max-w-2xl auto-rows-fr grid-cols-1 gap-4 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
|
||||
{filteredPosts.map((post) => (
|
||||
<article
|
||||
key={post.id}
|
||||
className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 aspect-square"
|
||||
>
|
||||
<img alt="" src={post.imageUrl} className="absolute inset-0 -z-10 size-full object-cover aspect-square" />
|
||||
<div className="absolute inset-0 -z-10 bg-linear-to-t from-gray-900 via-gray-900/40" />
|
||||
<div className="absolute inset-0 -z-10 rounded-2xl ring-1 ring-gray-900/10 ring-inset" />
|
||||
|
||||
<div className="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm/6 text-gray-300">
|
||||
<time dateTime={post.datetime} className="mr-8">
|
||||
{post.phase}
|
||||
</time>
|
||||
</div>
|
||||
<h3 className="mt-3 text-lg/6 font-semibold text-white">
|
||||
<a href={post.href}>
|
||||
<span className="absolute inset-0" />
|
||||
{post.title}
|
||||
</a>
|
||||
</h3>
|
||||
<p className="mt-5 text-sm/7 leading-tight text-gray-100">{post.description}</p>
|
||||
<a href={post.href} className="mt-6 inline-flex items-center gap-x-2 text-sm font-semibold text-indigo-400">
|
||||
Read more
|
||||
<ChevronRightIcon className="h-5 w-5 flex-none" aria-hidden="true" />
|
||||
</a>
|
||||
</article>
|
||||
{/* Filters */}
|
||||
<div className="mt-10 grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
|
||||
{Object.entries(filters).map(([filterType, options]) => (
|
||||
<select
|
||||
key={filterType}
|
||||
onChange={(e) => handleFilterChange(filterType, e.target.value)}
|
||||
className="w-full border border-gray-300 rounded-md p-2"
|
||||
value={filtersState[filterType as keyof typeof filtersState]}
|
||||
>
|
||||
{options.map(opt => (
|
||||
<option key={opt} value={opt}>{opt}</option>
|
||||
))}
|
||||
</select>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Cards */}
|
||||
<div className="mt-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{filteredProjects.map(project => (
|
||||
<div key={project.id} className="relative rounded-2xl overflow-hidden bg-gray-900 text-white shadow-lg aspect-[4/5]">
|
||||
<img src={project.imageUrl} alt={project.title} className="absolute inset-0 w-full h-full object-cover opacity-50" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/50 to-transparent" />
|
||||
<div className="relative p-6 flex flex-col justify-end h-full">
|
||||
<div className="text-sm text-indigo-300 font-semibold">{project.impactGoal}</div>
|
||||
<h3 className="text-2xl font-bold mt-2">{project.title}</h3>
|
||||
<p className="text-sm mt-1">{project.location}</p>
|
||||
|
||||
<div className="mt-4 text-sm">
|
||||
<span className="text-gray-300">{project.fundedPercent}% funded</span> · <span className="text-gray-300">{project.contributors} backers</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex items-center justify-between gap-2">
|
||||
<a href={project.href} className="text-indigo-400 hover:text-indigo-300 font-semibold flex items-center">
|
||||
Learn More <ChevronRightIcon className="ml-1 h-4 w-4" />
|
||||
</a>
|
||||
<Button variant="secondary" className="text-sm bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 rounded-md">
|
||||
Support
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredProjects.length === 0 && (
|
||||
<div className="text-center mt-12 text-gray-500 text-lg">No projects match your filter criteria.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
Reference in New Issue
Block a user