Spaces:
Sleeping
Sleeping
File size: 3,148 Bytes
9215c5e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 'use client'
import { Code2, BookOpen, Lightbulb } from 'lucide-react'
const features = [
{
title: 'Open Source',
description: 'Building and contributing to open-source projects that impact the Nepali tech community',
icon: Code2,
color: 'from-green-400 to-green-600',
bgColor: 'bg-green-50 dark:bg-green-900/50',
hoverBg: 'hover:bg-green-100 dark:hover:bg-green-800/60',
borderColor: 'border-green-200 dark:border-green-700',
},
{
title: 'Open Research',
description: 'Advancing knowledge through collaborative research on local tech challenges',
icon: BookOpen,
color: 'from-purple-400 to-purple-600',
bgColor: 'bg-purple-50 dark:bg-purple-900/50',
hoverBg: 'hover:bg-purple-100 dark:hover:bg-purple-800/60',
borderColor: 'border-purple-200 dark:border-purple-700',
},
{
title: 'Nepal Needs',
description: 'Identifying and solving real problems faced by businesses and communities in Nepal',
icon: Lightbulb,
color: 'from-blue-400 to-blue-600',
bgColor: 'bg-blue-50 dark:bg-blue-900/50',
hoverBg: 'hover:bg-blue-100 dark:hover:bg-blue-800/60',
borderColor: 'border-blue-200 dark:border-blue-700',
},
]
export function FeaturesSection() {
return (
<section className="py-12 sm:py-16 md:py-20 px-4 md:px-6 bg-background" aria-labelledby="features-heading">
<div className="container mx-auto">
<div className="text-center mb-10 sm:mb-12 md:mb-16">
<h2 id="features-heading" className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-foreground mb-3 sm:mb-4">
What We Do
</h2>
<p className="text-sm sm:text-base md:text-lg text-muted-foreground max-w-2xl mx-auto px-2">
We focus on three core pillars to drive innovation in Nepal's tech ecosystem
</p>
</div>
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 md:gap-8 max-w-6xl mx-auto">
{features.map((feature, index) => {
const Icon = feature.icon
return (
<article
key={index}
className={`${feature.bgColor} ${feature.hoverBg} ${feature.borderColor} p-5 sm:p-6 md:p-8 rounded-xl sm:rounded-2xl transition-all duration-300 hover:shadow-xl sm:hover:scale-105 border group cursor-pointer`}
>
<div className={`w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 rounded-lg sm:rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-4 sm:mb-5 md:mb-6 group-hover:scale-110 transition-transform shadow-lg`}>
<Icon className="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-white" aria-hidden="true" />
</div>
<h3 className="text-lg sm:text-xl md:text-2xl font-bold text-foreground mb-2 sm:mb-3">
{feature.title}
</h3>
<p className="text-sm sm:text-base text-muted-foreground leading-relaxed">
{feature.description}
</p>
</article>
)
})}
</div>
</div>
</section>
)
}
|