File size: 9,349 Bytes
0a6a843 b2f38d7 0a6a843 bd60135 0a6a843 b2f38d7 0a6a843 |
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 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 |
import { useNavigate } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Menu } from 'lucide-react'
export function UseCases() {
const navigate = useNavigate()
const useCases = [
{
id: 1,
category: 'Use case 1: Outdoor Rescue',
title: 'Offline AI that guides survival in extreme environments',
description: 'When hikers, travelers, or drivers lose connection to mountains, forests, or rural roads, cloud AI systems can\'t offer real-time survival guidance, first aid tips, and emergency signaling — even without internet. Includes moments, it becomes your reliable voice of calm and safety.',
image: '/api/placeholder/336/240',
bgColor: 'from-blue-100 to-purple-100'
},
{
id: 2,
category: 'Use case 2: Offline Healthcare',
title: 'A simple device for seniors to access trusted medical guidance',
description: 'Many elderly users struggle with smartphones and digital devices. Our simple, voice-only need to press a button or speak a request to get clear, step-by-step medical advice. No internet, no accounts, no complicated setup — just instant, private support for everyday health concerns that helps.',
image: '/api/placeholder/336/240',
bgColor: 'from-green-100 to-blue-100'
},
{
id: 3,
category: 'Use case 3: AI Companion and Assistance',
title: 'A private, always-available conversational partner',
description: 'Life can be stressful and lonely at times. Our Offline AI device can be embedded inside a plush toy, transforming it into a private, always-available companion. It listens, talks, tells stories without uploading data to the cloud. AI partner that brings warmth, reassurance, and practical help whenever you need it.',
image: '/api/placeholder/336/240',
bgColor: 'from-purple-100 to-pink-100'
}
]
return (
<div className="min-h-screen bg-gray-50">
{/* Navigation */}
<nav className="bg-white border-b border-gray-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-20">
{/* Logo */}
<div className="flex items-center">
<img
src="/assets/logo.png"
alt="EdgeLLM Logo"
className="h-16 w-16"
onError={(e) => {
console.error('Logo failed to load')
e.currentTarget.style.display = 'none'
}}
/>
</div>
{/* Navigation Links */}
<div className="hidden md:flex items-center space-x-8">
<button onClick={() => navigate('/')} className="text-gray-700 hover:text-purple-600 font-medium">
Home
</button>
<button onClick={() => navigate('/technology')} className="text-gray-700 hover:text-purple-600 font-medium">
Technology
</button>
<span className="text-white bg-purple-600 px-4 py-2 rounded-md font-medium">
Use Cases
</span>
<Button
variant="outline"
onClick={() => navigate('/playground')}
className="border-purple-600 text-purple-600 hover:bg-purple-50"
>
My device
</Button>
</div>
{/* Mobile menu button */}
<div className="md:hidden">
<Button variant="ghost" size="sm">
<Menu className="h-5 w-5" />
</Button>
</div>
</div>
</div>
</nav>
{/* Header Section */}
<div className="py-24 px-4 sm:px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
{/* Title */}
<h1 className="text-4xl md:text-5xl font-bold text-black mb-6">
Use Case Examples
</h1>
<p className="text-xl text-purple-700 font-semibold max-w-2xl mx-auto mb-12">
Bringing intelligent computing to the edge of connectivity
</p>
</div>
</div>
{/* Use Cases Content */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{useCases.map((useCase, index) => (
<Card
key={useCase.id}
className="bg-white shadow-lg border-0 rounded-3xl overflow-hidden h-full flex flex-col"
>
<CardContent className="p-6 flex flex-col h-full">
{/* Image */}
<div className="w-full h-60 rounded-xl mb-6 overflow-hidden">
<img
src={`/assets/${index === 0 ? 'outdoor_rescue.png' : index === 1 ? 'health_care.png' : 'companion.png'}`}
alt={useCase.title}
className="w-full h-full object-cover"
onError={(e) => {
console.error(`Failed to load image for use case ${index + 1}`)
// Fallback to gradient background with icon
e.currentTarget.style.display = 'none'
const fallbackDiv = document.createElement('div')
fallbackDiv.className = 'w-full h-60 bg-gradient-to-br from-gray-200 to-gray-300 rounded-xl flex items-center justify-center'
if (index === 0) fallbackDiv.innerHTML = '<svg class="h-16 w-16 text-purple-500" fill="currentColor" viewBox="0 0 24 24"><path d="M14 6l-3.75 5L8 8l-4 6h16l-6-8z"/></svg>'
else if (index === 1) fallbackDiv.innerHTML = '<svg class="h-16 w-16 text-green-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>'
else fallbackDiv.innerHTML = '<svg class="h-16 w-16 text-pink-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>'
if (e.currentTarget.parentNode) {
e.currentTarget.parentNode.appendChild(fallbackDiv)
}
}}
/>
</div>
<div className="flex flex-col flex-grow space-y-4">
{/* Category */}
<div className="text-sm font-semibold text-purple-600">
{useCase.category}
</div>
{/* Title */}
<h3 className="text-xl font-semibold text-black leading-tight">
{useCase.title}
</h3>
{/* Description */}
<p className="text-gray-600 text-sm leading-relaxed flex-grow">
{useCase.description}
</p>
{/* Button */}
<div className="pt-4">
<Button
className="bg-purple-600 hover:bg-purple-700 text-white text-sm px-4 py-2 w-auto"
onClick={() => {
// Handle use case selection
console.log('Selected use case:', useCase.id)
}}
>
Select
</Button>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
{/* CTA Section */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
<div className="relative">
{/* Background with gradient and blur */}
<div className="absolute inset-0 bg-gradient-to-r from-purple-400/30 via-blue-500/30 to-pink-500/30 backdrop-blur-sm rounded-3xl"></div>
{/* Content */}
<div className="relative bg-purple-400/20 backdrop-blur-lg rounded-3xl p-8 text-center">
{/* Audio Visualizer Effect */}
<div className="flex justify-center mb-6 space-x-1">
{[...Array(20)].map((_, i) => (
<div
key={i}
className="bg-purple-600 rounded-full animate-pulse"
style={{
width: '3px',
height: `${Math.random() * 40 + 10}px`,
animationDelay: `${i * 0.1}s`,
animationDuration: '1s'
}}
/>
))}
</div>
<h2 className="text-2xl font-medium text-white mb-4">
Customize your own device
</h2>
<p className="text-gray-900 mb-6">
Need help? Contact us to get customized device and services
</p>
<Button
className="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3"
onClick={() => navigate('/playground')}
>
Get Started
</Button>
</div>
</div>
</div>
</div>
)
}
|