mohanki/limelite_faceanalyzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance landing page with AI visuals and feature chips

Browse Source
This commit is contained in:
mohanki
2026-09-23 00:41:56 +05:30
parent 3bbe454e1f
commit aa275d072c
1 changed files with 669 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.js
+40 -7
View File
@@ -446,22 +446,40 @@ const App = () => {
{/* Landing View */}
{view === 'landing' && (
<div className="flex flex-col items-center justify-center w-full px-4 gap-8 fade-in mt-16 md:mt-32">
<div className="text-center space-y-4 mb-2">
<div className="flex flex-col items-center justify-center w-full px-4 gap-8 fade-in mt-12 md:mt-24 relative">
{/* Background Ambient Glows */}
<div className="absolute top-10 left-1/2 w-[300px] h-[300px] bg-limelite-red/20 rounded-full blur-[100px] -translate-x-1/2 -z-10"></div>
<div className="absolute bottom-10 left-1/4 w-[200px] h-[200px] bg-limelite-maroon/20 rounded-full blur-[80px] -z-10"></div>
{/* Decorative AI Icon */}
<div className="relative mb-4">
<div className="absolute inset-0 bg-limelite-red/20 blur-xl rounded-full animate-pulse"></div>
<div className="w-20 h-20 bg-white/5 border border-white/10 rounded-full flex items-center justify-center backdrop-blur-md relative z-10 shadow-xl shadow-limelite-red/10">
<svg className="w-10 h-10 text-limelite-red" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<div className="text-center space-y-4 mb-2 z-10">
<h1 className="text-4xl md:text-5xl font-serif italic text-white leading-tight tracking-[0.02em]">
Step into your style
Intelligent Face Analysis
</h1>
<p className="text-xs text-gray-300 font-sans font-bold tracking-widest uppercase mt-4 max-w-sm mx-auto">
<p className="text-gray-400 font-light max-w-md mx-auto text-sm md:text-base px-4">
Experience our next-generation AI. We analyze your facial features and skin condition to generate a deeply personalized aesthetic report.
</p>
<p className="text-xs text-limelite-red font-sans font-bold tracking-widest uppercase mt-6 max-w-sm mx-auto">
Select your action to begin
</p>
</div>
{/* Action Buttons Container */}
<div className="w-full flex flex-col sm:flex-row items-center justify-center gap-4 max-w-sm sm:max-w-md mx-auto">
<div className="w-full flex flex-col sm:flex-row items-center justify-center gap-4 max-w-sm sm:max-w-md mx-auto z-10">
{/* Take Photo Card */}
<button
onClick={() => setView('camera')}
className="w-full sm:flex-1 bg-white text-[#1A1A1A] rounded-xl px-6 py-4 font-bold text-sm tracking-widest uppercase shadow-lg hover:bg-gray-100 transition-all text-center border-2 border-transparent"
className="w-full sm:flex-1 bg-white text-[#1A1A1A] rounded-xl px-6 py-4 font-bold text-sm tracking-widest uppercase shadow-[0_0_20px_rgba(255,255,255,0.1)] hover:shadow-[0_0_25px_rgba(255,255,255,0.2)] hover:bg-gray-100 transition-all text-center border-2 border-transparent"
>
Take Photo
</button>
@@ -469,7 +487,7 @@ const App = () => {
{/* Upload Photo Card */}
<button
onClick={() => document.getElementById('uploadInput').click()}
className="w-full sm:flex-1 bg-[#1A1A1A] text-white border border-gray-700 rounded-xl px-6 py-4 font-bold text-sm tracking-widest uppercase shadow-lg hover:bg-black transition-all text-center"
className="w-full sm:flex-1 bg-[#1A1A1A] text-white border border-gray-700 rounded-xl px-6 py-4 font-bold text-sm tracking-widest uppercase shadow-lg hover:bg-black transition-all text-center hover:border-gray-500"
>
Upload Photo
</button>
@@ -482,6 +500,21 @@ const App = () => {
/>
</div>
{/* Feature Chips */}
<div className="flex flex-wrap items-center justify-center gap-3 mt-8 z-10 opacity-70">
<div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-xs text-gray-300">
<svg className="w-3.5 h-3.5 text-limelite-red" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
Precision Mapping
</div>
<div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-xs text-gray-300">
<svg className="w-3.5 h-3.5 text-limelite-red" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
Deep Skin Analysis
</div>
<div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-xs text-gray-300">
<svg className="w-3.5 h-3.5 text-limelite-red" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
Instant PDF Report
</div>
</div>
</div>
)}