Commit
·
8e04a21
1
Parent(s):
6cb6c09
� REDESIGN: Update Landing page to match design mockup
Browse files✨ Changes:
- Replace EdgeLLM logo with Huoxu circular logo (gradient purple)
- Remove 'Get Started with EdgeLLM' section for cleaner design
- Simplify layout to match provided design exactly
- Update both header and footer logos consistently
- Remove unused icon imports (Brain, Settings, MessageSquare, Layers)
� Result: Landing page now perfectly matches the provided design mockup
- Huoxu logo in header and footer
- Clean 3-card layout (Always Available, Privacy & Security, Reliability)
- Proper 'Need help? Contact us...' footer message
frontend/src/pages/Landing.tsx
CHANGED
|
@@ -4,11 +4,7 @@ import {
|
|
| 4 |
Clock,
|
| 5 |
Shield,
|
| 6 |
Zap,
|
| 7 |
-
Menu
|
| 8 |
-
Brain,
|
| 9 |
-
Settings,
|
| 10 |
-
MessageSquare,
|
| 11 |
-
Layers
|
| 12 |
} from 'lucide-react'
|
| 13 |
|
| 14 |
export function Landing() {
|
|
@@ -22,16 +18,9 @@ export function Landing() {
|
|
| 22 |
<div className="flex justify-between items-center h-20">
|
| 23 |
{/* Logo */}
|
| 24 |
<div className="flex items-center">
|
| 25 |
-
<
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
className="h-16 w-16"
|
| 29 |
-
onError={(e) => {
|
| 30 |
-
// Fallback if logo doesn't load
|
| 31 |
-
console.error('Logo failed to load')
|
| 32 |
-
e.currentTarget.style.display = 'none'
|
| 33 |
-
}}
|
| 34 |
-
/>
|
| 35 |
</div>
|
| 36 |
|
| 37 |
{/* Navigation Links */}
|
|
@@ -159,62 +148,14 @@ export function Landing() {
|
|
| 159 |
</div>
|
| 160 |
</div>
|
| 161 |
|
| 162 |
-
{/* Quick Access Section */}
|
| 163 |
-
<div className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
|
| 164 |
-
<div className="max-w-4xl mx-auto text-center">
|
| 165 |
-
<h2 className="text-3xl font-bold text-gray-900 mb-8">
|
| 166 |
-
Get Started with EdgeLLM
|
| 167 |
-
</h2>
|
| 168 |
-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
| 169 |
-
<Button
|
| 170 |
-
variant="outline"
|
| 171 |
-
className="h-24 flex flex-col items-center justify-center gap-2 border-2 hover:border-purple-600 hover:bg-purple-50"
|
| 172 |
-
onClick={() => navigate('/templates')}
|
| 173 |
-
>
|
| 174 |
-
<Brain className="h-6 w-6 text-purple-600" />
|
| 175 |
-
<span className="font-medium">AI Templates</span>
|
| 176 |
-
</Button>
|
| 177 |
-
<Button
|
| 178 |
-
variant="outline"
|
| 179 |
-
className="h-24 flex flex-col items-center justify-center gap-2 border-2 hover:border-purple-600 hover:bg-purple-50"
|
| 180 |
-
onClick={() => navigate('/playground')}
|
| 181 |
-
>
|
| 182 |
-
<MessageSquare className="h-6 w-6 text-purple-600" />
|
| 183 |
-
<span className="font-medium">Playground</span>
|
| 184 |
-
</Button>
|
| 185 |
-
<Button
|
| 186 |
-
variant="outline"
|
| 187 |
-
className="h-24 flex flex-col items-center justify-center gap-2 border-2 hover:border-purple-600 hover:bg-purple-50"
|
| 188 |
-
onClick={() => navigate('/models')}
|
| 189 |
-
>
|
| 190 |
-
<Layers className="h-6 w-6 text-purple-600" />
|
| 191 |
-
<span className="font-medium">Models</span>
|
| 192 |
-
</Button>
|
| 193 |
-
<Button
|
| 194 |
-
variant="outline"
|
| 195 |
-
className="h-24 flex flex-col items-center justify-center gap-2 border-2 hover:border-purple-600 hover:bg-purple-50"
|
| 196 |
-
onClick={() => navigate('/settings')}
|
| 197 |
-
>
|
| 198 |
-
<Settings className="h-6 w-6 text-purple-600" />
|
| 199 |
-
<span className="font-medium">Settings</span>
|
| 200 |
-
</Button>
|
| 201 |
-
</div>
|
| 202 |
-
</div>
|
| 203 |
-
</div>
|
| 204 |
|
| 205 |
{/* Footer */}
|
| 206 |
<footer className="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
|
| 207 |
<div className="max-w-6xl mx-auto text-center">
|
| 208 |
<div className="flex items-center justify-center mb-4">
|
| 209 |
-
<
|
| 210 |
-
|
| 211 |
-
|
| 212 |
-
className="h-12 w-12"
|
| 213 |
-
onError={(e) => {
|
| 214 |
-
console.error('Footer logo failed to load')
|
| 215 |
-
e.currentTarget.style.display = 'none'
|
| 216 |
-
}}
|
| 217 |
-
/>
|
| 218 |
</div>
|
| 219 |
<p className="text-gray-400 mb-6">
|
| 220 |
Need help? Contact us to get customized device and services
|
|
|
|
| 4 |
Clock,
|
| 5 |
Shield,
|
| 6 |
Zap,
|
| 7 |
+
Menu
|
|
|
|
|
|
|
|
|
|
|
|
|
| 8 |
} from 'lucide-react'
|
| 9 |
|
| 10 |
export function Landing() {
|
|
|
|
| 18 |
<div className="flex justify-between items-center h-20">
|
| 19 |
{/* Logo */}
|
| 20 |
<div className="flex items-center">
|
| 21 |
+
<div className="w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full flex items-center justify-center">
|
| 22 |
+
<span className="text-white font-bold text-lg">Huoxu</span>
|
| 23 |
+
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 24 |
</div>
|
| 25 |
|
| 26 |
{/* Navigation Links */}
|
|
|
|
| 148 |
</div>
|
| 149 |
</div>
|
| 150 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 151 |
|
| 152 |
{/* Footer */}
|
| 153 |
<footer className="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
|
| 154 |
<div className="max-w-6xl mx-auto text-center">
|
| 155 |
<div className="flex items-center justify-center mb-4">
|
| 156 |
+
<div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full flex items-center justify-center">
|
| 157 |
+
<span className="text-white font-bold text-sm">Huoxu</span>
|
| 158 |
+
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 159 |
</div>
|
| 160 |
<p className="text-gray-400 mb-6">
|
| 161 |
Need help? Contact us to get customized device and services
|