Spaces:
Sleeping
Sleeping
File size: 2,293 Bytes
e0eaa09 4901b1e |
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 74 |
import { Badge } from '@/components/base';
import { Cloud, FileText, Grid, MessageCircle, Server } from 'lucide-react';
import Image from 'next/image';
const features = [
{
number: '01',
title: 'Chat with AI',
description: 'Ask your questions, brainstorm, and learn from the AI running on your device to be more productive.',
icon: MessageCircle,
},
{
number: '02',
title: 'Model Hub',
description: 'Access and manage various AI models directly from your device.',
icon: Grid,
},
{
number: '03',
title: 'Connect to Cloud AIs',
description: 'Seamlessly integrate with cloud-based AI services when needed.',
icon: Cloud,
},
{
number: '04',
title: 'Local API Server',
description: 'Run your own API server locally for complete control and privacy.',
icon: Server,
},
{
number: '05',
title: 'Chat with your files',
description: 'Interact with your documents and files using natural language.',
icon: FileText,
experimental: true,
},
];
export function FeaturesSection() {
return (
<section className="container space-y-16 py-24">
<h2 className="font-heading text-4xl md:text-5xl lg:text-6xl">Features</h2>
<div className="grid items-start gap-8 lg:grid-cols-2">
<div className="space-y-8">
{features.map(feature => (
<div key={feature.number} className="flex items-center gap-4">
<div className="font-heading text-3xl text-muted-foreground/50">{feature.number}</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<h3 className="text-xl font-semibold">{feature.title}</h3>
{feature.experimental && (
<Badge variant="secondary" className="text-xs">
Experimental
</Badge>
)}
</div>
<p className="text-muted-foreground">{feature.description}</p>
</div>
</div>
))}
</div>
<Image
src="https://jan.ai/assets/images/homepage/features01.png"
alt="App Screenshot Feature"
width={800}
height={800}
/>
</div>
</section>
);
}
|