✨ UPDATE LANDING PAGE: Refactor layout and improve content clarity

✅ Changes made to the Landing page:
- Refactored button navigation for consistency and clarity.
- Updated alt text and error handling for images to enhance accessibility.
- Revised section titles and descriptions for better understanding of features.
- Improved overall layout and spacing for a more cohesive user experience.

🛠️ Enhancements contribute to a more polished and user-friendly interface!

frontend/src/pages/Landing.tsx

@@ -1,11 +1,9 @@
-import { useNavigate } from 'react-router-dom'
-import { Button } from '@/components/ui/button'
-import { 
-  Menu
-} from 'lucide-react'
+import { useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Menu } from "lucide-react";
 
 export function Landing() {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
 
   return (
     <div className="min-h-screen bg-white">
@@ -15,13 +13,13 @@ export function Landing() {
           <div className="flex justify-between items-center h-20">
             {/* Logo */}
             <div className="flex items-center">
-              <img 
-                src="/assets/logo.png" 
-                alt="EdgeLLM Logo" 
+              <img
+                src="/assets/logo.png"
+                alt="EdgeLLM Logo"
                 className="h-20 w-20"
                 onError={(e) => {
-                  console.error('Logo failed to load')
-                  e.currentTarget.style.display = 'none'
+                  console.error("Logo failed to load");
+                  e.currentTarget.style.display = "none";
                 }}
               />
             </div>
@@ -31,21 +29,21 @@ export function Landing() {
               <span className="text-white bg-purple-600 px-4 py-2 rounded-md font-medium">
                 Home
               </span>
-              <button 
-                onClick={() => navigate('/technology')} 
+              <button
+                onClick={() => navigate("/technology")}
                 className="text-gray-700 hover:text-purple-600 font-medium transition-colors"
               >
                 Technology
               </button>
-              <button 
-                onClick={() => navigate('/usecases')} 
+              <button
+                onClick={() => navigate("/usecases")}
                 className="text-gray-700 hover:text-purple-600 font-medium transition-colors"
               >
                 Use Cases
               </button>
-              <Button 
-                variant="outline" 
-                onClick={() => navigate('/mydevice')}
+              <Button
+                variant="outline"
+                onClick={() => navigate("/mydevice")}
                 className="border-purple-600 text-purple-600 hover:bg-purple-50"
               >
                 My Device
@@ -83,18 +81,18 @@ export function Landing() {
 
           {/* CTA Buttons */}
           <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
-            <Button 
+            <Button
               size="lg"
               className="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3 text-lg font-medium"
-              onClick={() => navigate('/usecases')}
+              onClick={() => navigate("/usecases")}
             >
               Learn More
             </Button>
-            <Button 
+            <Button
               size="lg"
               variant="outline"
               className="border-purple-600 text-purple-600 hover:bg-purple-50 px-8 py-3 text-lg font-medium"
-              onClick={() => navigate('/mydevice')}
+              onClick={() => navigate("/mydevice")}
             >
               I already have a device
             </Button>
@@ -106,25 +104,28 @@ export function Landing() {
       <div className="py-12 px-4 sm:px-6 lg:px-8 bg-gray-50">
         <div className="max-w-6xl mx-auto">
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {/* Always Available */}
+            {/* Always Available & Reliable */}
             <div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-200 text-center">
               <div className="mb-6">
                 <div className="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <img 
-                    src="/assets/24h.png" 
-                    alt="24/7 Available" 
+                  <img
+                    src="/assets/24h.png"
+                    alt="Always Available & Reliable"
                     className="h-10 w-10"
                     onError={(e) => {
-                      console.error('24h icon failed to load')
-                      e.currentTarget.style.display = 'none'
+                      console.error("24h icon failed to load");
+                      e.currentTarget.style.display = "none";
                     }}
                   />
                 </div>
-                <h3 className="text-lg font-bold text-black mb-3">Always Available</h3>
+                <h3 className="text-lg font-bold text-black mb-3">
+                  Always Available & Reliable
+                </h3>
               </div>
               <p className="text-gray-600 text-sm leading-relaxed">
-                Cloud AI fails without internet. Our offline AI runs fully on-device, 
-                ready to assist anywhere — from airplanes to remote mountains.
+                Cloud AI fails without internet and latency can cost lives in
+                emergencies. Our offline AI runs instantly on-device, ready
+                anywhere — from remote locations to safety-critical moments.
               </p>
             </div>
 
@@ -132,61 +133,67 @@ export function Landing() {
             <div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-200 text-center">
               <div className="mb-6">
                 <div className="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <img 
-                    src="/assets/privacy.png" 
-                    alt="Privacy & Security" 
+                  <img
+                    src="/assets/privacy.png"
+                    alt="Privacy & Security"
                     className="h-10 w-10"
                     onError={(e) => {
-                      console.error('Privacy icon failed to load')
-                      e.currentTarget.style.display = 'none'
+                      console.error("Privacy icon failed to load");
+                      e.currentTarget.style.display = "none";
                     }}
                   />
                 </div>
-                <h3 className="text-lg font-bold text-black mb-3">Privacy & Security</h3>
+                <h3 className="text-lg font-bold text-black mb-3">
+                  Privacy & Security
+                </h3>
               </div>
               <p className="text-gray-600 text-sm leading-relaxed">
-                Cloud AI requires uploading sensitive data. Offline AI keeps all processing local, 
-                protecting personal privacy and enterprise security.
+                Cloud AI requires uploading sensitive data. Offline AI keeps all
+                processing local, protecting personal privacy and enterprise
+                security.
               </p>
             </div>
 
-            {/* Reliability */}
+            {/* Affordable & Powerful */}
             <div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-200 text-center">
               <div className="mb-6">
                 <div className="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <img 
-                    src="/assets/reliablity.png" 
-                    alt="Reliability" 
+                  <img
+                    src="/assets/reliablity.png"
+                    alt="Affordable & Powerful"
                     className="h-10 w-10"
                     onError={(e) => {
-                      console.error('Reliability icon failed to load')
-                      e.currentTarget.style.display = 'none'
+                      console.error("Affordable icon failed to load");
+                      e.currentTarget.style.display = "none";
                     }}
                   />
                 </div>
-                <h3 className="text-lg font-bold text-black mb-3">Reliability</h3>
+                <h3 className="text-lg font-bold text-black mb-3">
+                  Affordable & Powerful
+                </h3>
               </div>
               <p className="text-gray-600 text-sm leading-relaxed">
-                Cloud latency can cost lives in emergencies. Offline AI responds instantly, 
-                built for survival, healthcare, and safety-critical moments.
+                Cloud AI charges expensive per-token fees that scale with usage.
+                Offline AI delivers enterprise-grade intelligence with unlimited
+                conversations, providing premium performance without recurring
+                costs.
               </p>
             </div>
           </div>
         </div>
       </div>
 
-
       {/* Footer */}
       <footer className="bg-white text-gray-600 py-8 px-4 sm:px-6 lg:px-8 border-t border-gray-200">
         <div className="max-w-6xl mx-auto text-center">
           <div className="flex items-center justify-center mb-4">
-            <img 
-              src="/assets/logo.png" 
-              alt="EdgeLLM Logo" 
+            <img
+              src="/assets/logo.png"
+              alt="EdgeLLM Logo"
               className="h-12 w-12"
               onError={(e) => {
-                console.error('Footer logo failed to load')
-                e.currentTarget.style.display = 'none'
+                console.error("Footer logo failed to load");
+                e.currentTarget.style.display = "none";
               }}
             />
           </div>
@@ -194,12 +201,18 @@ export function Landing() {
             Need help? Contact us to get customized device and services
           </p>
           <div className="flex justify-center space-x-6">
-            <a href="#" className="text-gray-500 hover:text-gray-700">Privacy Policy</a>
-            <a href="#" className="text-gray-500 hover:text-gray-700">Terms of Service</a>
-            <a href="#" className="text-gray-500 hover:text-gray-700">Support</a>
+            <a href="#" className="text-gray-500 hover:text-gray-700">
+              Privacy Policy
+            </a>
+            <a href="#" className="text-gray-500 hover:text-gray-700">
+              Terms of Service
+            </a>
+            <a href="#" className="text-gray-500 hover:text-gray-700">
+              Support
+            </a>
           </div>
         </div>
       </footer>
     </div>
-  )
+  );
 }

static/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Edge LLM</title>
-    <script type="module" crossorigin src="/assets/index-b546fb4a.js"></script>
+    <script type="module" crossorigin src="/assets/index-95452486.js"></script>
     <link rel="stylesheet" href="/assets/index-be9ccaff.css">
   </head>
   <body>