feat: enhance landing page with AI visuals and feature chips

frontend/src/App.js

@@ -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="flex flex-col items-center justify-center w-full px-4 gap-8 fade-in mt-12 md:mt-24 relative">
-              <div className="text-center space-y-4 mb-2">
+              
+              {/* 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>
           )}